<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<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>

点击页面会添加'tomato'，但是继续点击不会添加'tomato'，会给出提示[Vue warn]: Duplicate value found in v-for="val in arr": "tomato". Use track-by="$index" if you are expecting duplicate values.

解决办法：

<li v-for="val in arr" track-by="$index">  改成 <li v-for="val in arr" track-by="$index">

因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

按你的需求是希望循环comments,如果comments中没有需要复用的数据,可以直接写
<component v-for="comment in comments" track-by="$index"></component>
,如果所有的comments可以用id区分,则可以使用
<component v-for="comment in comments" track-by="id"></component>, 然后在替换数组comments 时，如果 Vue.js 遇到一个包含 id: 'xxx' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

track-by的使用的更多相关文章

  1. How to accept Track changes in Microsoft Word 2010?

    "Track changes" is wonderful and remarkable tool of Microsoft Word 2010. The feature allow ...

  2. IEEE/ACM ASONAM 2014 Industry Track Call for Papers

    IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...

  3. 使用angular中ng-repeat ， track by的用处

    我们见到最简单的例子是: <div ng-repeat="link in links" ></div> 如果item的值有重复的,比如links=[&quo ...

  4. 解密FFmpeg播放track mode控制

    上一篇文章(http://www.cnblogs.com/yangdanny/p/4421130.html)我们解决了在FFmpeg下如何处理H264和AAC的扩展数据,根据解出的NALU长度恢复了H ...

  5. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

    错误原因在于出现相同内容. 原写为: <li ng-repeat="log in logs" scroll-down> {{log}}</li> 改写为: ...

  6. track by

    ng-repeat指令中使用track by子语句解决重复数据遍历的错误 <li ng-repat="x in [2, 2]" ng-bind="x"&g ...

  7. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq

    angularjs 使用ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in ...

  8. ng-repeat指令中使用track by子语句解决重复数据遍历的错误

    用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...

  9. [OpenCV] Identify and Track Specific Object

    Abstract—Augmented Reality (AR) has become increasingly popular in recent years and it has a widespr ...

  10. [译] C track: compiling C programs.

    原文:C track: compiling C programs. C track: compiling C programs. 尽管有些计算机语言(如 Schema 或者 Basic)通常使用交互式 ...

随机推荐

  1. ubuntu16.04 Installing PHP 7.2

    //install sudo add-apt-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.2 //C ...

  2. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  3. Python package钓鱼

    Python package钓鱼   一．概述 在收录该文之后,知道创宇404安全实验室对该文中所提到的攻击方式进行跟进.整理分析原作者公布的钓鱼数据.值得一提的是,在跟进的过程中,我们发现了新的钓鱼 ...

  4. tornada-模板

    tornado模板 1.配置模板路径 (project/config.py) # coding=utf-8 import os BASE_DIRS = os.path.dirname(__file__ ...

  5. 标准C语言(4)

    分支语句可以在程序执行的时候从几组语句里选择一组,执行而忽略其他组,在编写程序的时候如果遇到多种可能性,每种可能性需要专门的语句处理,这种情况下就可以考虑采用分支结构解决问题 if关键字可以用来编写分 ...

  6. Linux排查问题工具汇总

    geektime专栏<linux性能优化实战>笔记 一.Linux问题排查命令 uptime top free vmstat iostat ifstat 二.Sun JDK自带工具 jps ...

  7. BZOJ2656 [Zjoi2012]数列(sequence)[模拟]

    这个递推式子可以发现$i$是偶数下标可以缩一半,是奇数下标就可以拆成两个下标,$\lfloor \frac{i}{2} \rfloor$以及$\lfloor \frac{i}{2}+1 \rfloor ...

  8. SparkStreaming HA高可用性

    1.UpdateStateByKey.windows等有状态的操作时,自动进行checkpoint,必须设置checkpoint目录,数据保留一份在容错的文件系统中,一旦内存中的数据丢失,可以从文件系 ...

  9. linux运维、架构之路-K8s通过Service访问Pod

    一.通过Service访问Pod 每个Pod都有自己的IP地址,当Controller用新的Pod替换发生故障的Pod时,新Pod会分配到新的IP地址,例如:有一组Pod对外提供HTTP服务,它们的I ...

  10. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...