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 new关键字的玄机 以及其它
Aug 25 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue实现二级导航栏效果
Oct 19 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JsRender实用入门教程
2014/10/31 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
python生成二维码的实例详解
2017/10/29 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python实现微信自动回复功能
2018/04/11 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
会计出纳岗位职责
2013/12/25 职场文书
保险专业自荐信范文
2014/02/20 职场文书
与美同行演讲稿
2014/09/13 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
高一化学教学反思
2016/02/22 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Pandas 数据编码的十种方法
2022/04/20 Python