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)通常使用交互式 ...
随机推荐
- H5的video标签在网页上播放MP4视频时只有声音没有画面
最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...
- vue-resource 全局拦截器
项目中可能会添加超时登录的功能,因此根据tokenid 判断是否超时.如果token已过期,需要跳转至登录页面. 因此需要用到全局拦截器拦截返回的状态 //下边代码添加在main.js中 Vue.ht ...
- Gcc 安装过程中部分配置
Gcc 安装过程中部分配置详解 全文参考<have fun with Gcc>一文,如有需要请联系原作者prolj@163.com 解压gcc源码后,需要进行configure,这时候一般 ...
- 关于获取某月某日最后一天时Calendar的cal.getActualMaximum(Calendar.DAY_OF_MONTH)的吐槽
例如: 在2017.03.29-31号 新建一个Calendar的単例 设置年:2017 设置月:2 int day = cal.getActualMaximum(Calendar.DAY_OF_MO ...
- springboot(2)-阶段篇
web开发 spring boot web开发非常的简单,其中包括常用的json输出.filters.property.log等 json 接口开发 在以前的spring 开发的时候需要我们提供jso ...
- 20、Nginx高可用架构
1.Keepalived高可用基本概述 1.1.什么是高可用 一般是指2台机器启动着相同的业务系统,当有一台机器down机了, 另外一台服务器能快速的接管, 对于访问的用户是无感知的. 1.2.高可用 ...
- 常见shell用法
分析nginx访问日志 awk '{a[b[$1]++]}END{for(i=length(a);i>0;i--)for(j in b)if(b[j]==i){c++;if(c<=10)p ...
- java8学习之流的短路与并发流
并发流: 从api的角度来看,其实跟咱们之前一直在用的stream()方式差不多,但是底层是有明显的不同,所以这里初步先对并发流有一个基本的认识, 说到串行与并行,最直观的感受就是效率的不同,所以下面 ...
- BZOJ 3876 统一下界上下界费用流
//Mcmf LargeDumpling #include<iostream> #include<cstdio> #include<cstdlib> #includ ...
- 心态炸了，我再写一个4.1.0版本的SND实例
maven依赖 <!-- Tests --><dependency> <groupId>org.springframework</groupId> &l ...