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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
php 面向对象的一个例子
2011/04/12 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python3 socket同步通信简单示例
2017/06/07 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python list和str互转的实现示例
2020/11/16 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
自荐信需注意事项
2014/01/25 职场文书
我的祖国演讲稿
2014/05/04 职场文书
企业承诺书怎么写
2014/05/24 职场文书
建筑施工安全责任书
2014/07/24 职场文书
个人整改方案范文
2014/10/25 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python