vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
更新时间：2019年03月15日 11:54:56 作者：白杨-M
这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考，具体如下：
问题：
错误提示如下：
解决问题的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net vue v-for循环重复数据无法添加问题</title>
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in arr" track-by="$index">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['apple','pear','orange']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
</script>
</body>
</html>
注意：这里在<li v-for="val in arr">中添加了track-by="$index"
即：
<li v-for="val in arr" track-by="$index">
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章
vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了Vue组件上使用v-model之单选框,代码分为子组件内容和父组件内容，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了Vue2如何实现数字滚动翻页效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-03-03
这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家分享了vue全局过滤器概念及注意事项和基本使用方法，下面文字围绕vue全局过滤器的相关资料展开具体的详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
vue2响应式原理之Object.defineProperty()方法的使用
这篇文章主要介绍了vue2响应式原理之Object.defineProperty()方法的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Nuxt3 使用 Vue.js 作为视图引擎，Nuxt3 中提供了所有 Vue 3 功能，所以我们创建的Nuxt项目其实也是vue3项目，这篇文章主要介绍了Nuxt3重点特性使用举例记录,需要的朋友可以参考下2022-12-12
vue组件之间的通信方式有很多种,props/emit,event bus,vuex,provide/inject等,还有一种通信方式就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$listeners的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Elementui如何限制el-input框输入小数点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论