track-by的使用
<!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的使用的更多相关文章
- How to accept Track changes in Microsoft Word 2010?
"Track changes" is wonderful and remarkable tool of Microsoft Word 2010. The feature allow ...
- IEEE/ACM ASONAM 2014 Industry Track Call for Papers
IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...
- 使用angular中ng-repeat ， track by的用处
我们见到最简单的例子是: <div ng-repeat="link in links" ></div> 如果item的值有重复的,比如links=[&quo ...
- 解密FFmpeg播放track mode控制
上一篇文章(http://www.cnblogs.com/yangdanny/p/4421130.html)我们解决了在FFmpeg下如何处理H264和AAC的扩展数据,根据解出的NALU长度恢复了H ...
- [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> 改写为: ...
- track by
ng-repeat指令中使用track by子语句解决重复数据遍历的错误 <li ng-repat="x in [2, 2]" ng-bind="x"&g ...
- [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 ...
- ng-repeat指令中使用track by子语句解决重复数据遍历的错误
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- [OpenCV] Identify and Track Specific Object
Abstract—Augmented Reality (AR) has become increasingly popular in recent years and it has a widespr ...
- [译] C track: compiling C programs.
原文:C track: compiling C programs. C track: compiling C programs. 尽管有些计算机语言(如 Schema 或者 Basic)通常使用交互式 ...
随机推荐
- call，apply，bind的理解
call,apply,bind均是用于改变this指向. 三者相似之处: 1:都是用于改变函数的this指向. 2:第一个参数都是this要指向的对象. 3:都可以通过后面的参数进行对方法的传参. l ...
- 一个密码经过多次MD5加密能否提高安全性？Java MD5盐值加解密
什么是MD5? MD5(Message Digest Algorithm 5,信息摘要算法5),是计算机广泛使用的摘要算法(又称哈希算法)之一.MD5是将一段信息,通过其不可逆的字符串变换算法,产生了 ...
- AngularJs 初级入门 学习笔记
刚学angular, 做一些笔记方便自己翻看. ng-app: 填写模块的名称 ng-init: 初始化数据(一般通过控制器初始化) ng-model: 填写数据模型 ng-bind: 绑定数据模型, ...
- Java内存泄漏真实案例
内存泄漏:当不再需要一个对象时,垃圾收集器会回收它:如果不需要的对象一直在产生而不被收回,就称作“内存泄漏”. 以下为本人在工作中遇到的内存泄漏的案例: 1.对于大量的请求,使用了Executors. ...
- vs2017新建一个空项目
我们会发现VS2017的控制台程序创建之后会有一些头文件这和之前的VS的版本不一样之前的都可以选择空项目来避免,下面我们就来介绍方法: 首先我们不要创建新的控制台项目,而是创建桌面向导: 然后我们就可 ...
- HDU - 4431 Mahjong (模拟+搜索+哈希+中途相遇)
题目链接 基本思路:最理想的方法是预处理处所有胡牌的状态的哈希值,然后对于每组输入,枚举每种新加入的牌,然后用哈希检验是否满足胡牌的条件.然而不幸的是,由于胡牌的状态数过多(4个眼+一对将),预处理的 ...
- 多对多第三张表的创建方式 和 forms组件的使用
目录 一.多对多第三张表的创建 1. 全自动方式 (1)实现代码 (2)优点和不足 2. 纯手撸方式(了解) (1)实现代码 (2)优点和不足 3. 半自动方式(推荐使用) (1)实现代码 (2)优点 ...
- spring-data-mongodb两种实现方式对比
spring-data-mongodb两种实现方式对比 参考链接:https://blog.csdn.net/feinifi/article/details/83752862
- Python 3标准库 第五章 数学运算
第五章数学运算-----------------------上下文解释:编程时,我们一般也是先给程序定义一些前提(环境变量.描述环境变化的全局变量等),这些“前提”就是上文,然后再编写各功能模块的代码 ...
- 交叉熵和softmax
深度学习分类问题结尾就是softmax,损失函数是交叉熵,本质就是极大似然...