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 元素。
最新文章
- iOS 网易新闻用到的框架
- 7.10 数据注解特性--NotMapped
- HttpContext.GetOwinContext().Authentication 报错 解决办法
- Servlet上下文
- [算法] 数据结构之AVL树
- IE 兼容性写法
- 12、第十二节课，css伪类 （转）
- 谈谈文件增量同步算法:RSYNC和CDC
- PHP使用DomDocument抓取HTML内容
- 微信小程序开源项目库汇总
- dedecms_分页技术
- Linux必备操作vim
- React Native ios开发第一课
- golang类型断言
- netcore swagger xml发布丢失问题
- android判断adb调试是否打开及代码跳转到开发者选项界面
- IT 运营架构杂谈【前言】
- Chrome插件汇总
- 新电脑的操作系统win10的所有设置问题汇总
- SpringBoot(五) Web Applications: MVC