vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】


Posted in Javascript onMarch 15, 2019

本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考,具体如下:

问题:

错误提示如下:

vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

解决问题的代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
jQuery操作元素css样式的三种方法
Jun 04 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
You might like
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
vuejs指令详解
2017/02/07 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python3 读写文件换行符的方法
2018/04/09 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python 星号(*)的多种用途
2020/09/21 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
人事部主管岗位职责
2013/12/26 职场文书
索桥的故事教学反思
2014/02/06 职场文书
大学毕业寄语大全
2014/04/10 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书