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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
详解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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python 日志增量抓取实现方法
2018/04/28 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
详解python中*号的用法
2019/10/21 Python
Python hmac模块使用实例解析
2019/12/24 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
给学校建议书范文
2014/05/13 职场文书
关于责任的演讲稿
2014/05/20 职场文书
宣传工作经验材料
2014/06/02 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS