- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
更新能够使其工作,但遇到最后一个问题。更新的代码在这里: VueJs not working on first click or first event
我一直在试图找到一种方法,让循环内的组件不充当一个整体。
我有一个循环(3 个 div),在循环内有 2 个文本框。但每当我在其中任何一个中输入值时,该值都会填充到每个人中。
谁能帮我分离这些组件?
我正在尝试使父 div(第一个循环)动态化。因此,子组件(第二个循环)应该与它们自己的祖 parent 组件(文本框)分开运行。
这是我的代码:
<div id="app">
<div v-for="(ctr, c) in 3" :key="c">
<button @click="input_add">1st</button>
<div>
<div v-for="(input, act) in inputs" :key="act.id">
<input type="text" v-model="input.name">
<input type="text" v-model="input.time">
<button @click="input_remove(act)">Delete</button>
<button @click="input_add">Add row</button>
</div>
</div>
{{ inputs }}
</div>
</div>
const app = new Vue({
el: "#app",
data: {
inputs: [],
counter: 0,
},
methods: {
input_add() {
this.inputs.push({
id: this.counter + 1,
day: null,
name: null,
time: null,
})
this.counter += 1
},
input_remove(index) {
this.inputs.splice(index,1)
this.counter -= 1
}
}
});
结果:
最佳答案
正如我在评论中提到的,您应该为迭代项创建一个组件。
父组件:
<div v-for="(item, index) in array" :key="index">
<child :item="item" />
</div>
现在您将item
作为 Prop 发送了。让我们在 child 身上捕获它。
子组件:
<div>
<input type="text" v-model="input.name">
<input type="text" v-model="input.time">
<button @click="input_remove(act)">Delete</button>
<button @click="input_add">Add row</button>
</div>
{{ inputs }}
props: [item], // I am not sure you need it or not, BUT just showing how to do it.
data() {return { // your datas };},
methods: {
// your methods...
},
//and else...
现在每个迭代项只能控制自身。我希望现在它有意义。
然后在子组件中构建按钮作为输入。之后,您可以将事件应用于刚刚单击的项目。
关于javascript - 循环内的 VueJS 组件充当一个整体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60058705/
我正在阅读Head First Design Patterns一书,在第382页上说: Composite Patterns is used when you have collection of o
我将我的电脑用作 wifi 热点,并将其他设备连接到它。然后使用wireshark,我可以看到特定设备上发送/接收的数据包,但是我怎样才能看到设备正在查看的完整网页而不是单独的数据包? 最佳答案 尝试
在 URL 中打开我的 Jenkins 时,我似乎无法登录它会抛出消息“用户缺少整体/读取权限”。我试过answer来自类似的问题,但禁用安全性不起作用。 Jenkins 继续抛出错误。有人建议我一起
我已经使用工具分配测试了我的应用程序并得到了这张图片: 如图所示,我的应用程序正常工作,但它通常以总字节数计值吗?我担心“#Allocations (Net/Overall)”,因为它的颜色是红色。这
我遵循教程 Deployment on Tomcat without modification of monitored webapps (beta) .监控站点正在运行,我可以看到统计页面。问题是
所以我有一个 div,其中整个东西都是一个 anchor 标记,我试图控制颜色在悬停时的显示方式并获得不同的结果。希望我能用 CSS 做到这一点。发生的事情是悬停,一个文本发生变化,但另一个没有。但是
我创建了一个程序,您可以在其中输入行驶的英里数和每 jar 油使用的加仑数,该程序会显示每 jar 油的 mpg。我使用的是 Visual Studio 2010。当我输入标记值 -1 时,系统会给出
我有一个由 N 个节点组成的 zookeeper 集群(彼此了解)。如果我在 zk 客户端连接字符串中只传递 M < N 个节点地址怎么办?集群的行为是什么? 在更具体的情况下,如果我只从集群中传递
我一直在试图弄清楚当使用诸如 pushViewController:animated、presentModalViewController:animated 和 UITabBarViewControl
我已经在 VIM 中安装了 minikube,并且我拥有具有所有权限的服务帐户 token 。是否有来自 kubernetes 的 API 来获取资源使用情况(总体)。 最佳答案 要获取 CPU 和内
如何通过 HTTP 客户端(例如 CURL、Insomnia、Postman 等)快速使用使用 JWT token 的 JHipster 生成的应用程序? 最佳答案 嗯,我研究了一段时间,发现你必须遵
我是一名优秀的程序员,十分优秀!