vue v-model directives cannot update the iteration variable 'x' itself

本文介绍了一个使用 Vue.js 实现的动态数据表格案例,该表格能够通过按钮操作删除指定项,并实时更新显示的数据。文章展示了如何利用 Vue 的响应式机制及 v-for 指令来构建动态数据绑定的表格,并提供了完整的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[b][size=medium][color=blue]new Vue({
el: '#app',
data: {
settings: {
runs: [1, 2, 3]
}
},
methods: {
removeRun: function(i) {
console.log("Remove", i);
this.settings.runs.splice(i,1);
}
}
});


<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<table id="app">
<tr v-for="(run, index) in settings.runs">
[/color]
[color=red]
<td>
<input type="text" :name="'run'+index" v-model="settings.runs[index]" />
</td>
[/color]
[color=blue]
<td>
<button @click.prevent="removeRun(index)">X</button>
</td>

<td>
{{run}}
</td>

</tr>
</table>[/color][/size][/b]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值