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

最新推荐文章于 2025-10-11 10:24:25 发布

原创最新推荐文章于 2025-10-11 10:24:25 发布 · 8.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Vue 专栏收录该内容

13 篇文章

订阅专栏

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

[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]