vue.js data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换？
data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换，console.log输出元素与显示 重复的元素 只渲染了一次
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello vue.js</title>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
</head>
<body>
<!-- this is view -->
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>索引:{{ $index }} 数据:{{ todo }}</span>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push(text)
console.log(this.todos);
this.newTodo = ''
}
}
}
})
</script>
</html>
福卡2回答
-
福卡
找到问题了自问自答 ：<li v-for="todo in todos" >中添加 track-by="$index" 变成<li v-for="todo in todos" track-by="$index" >如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值 -
guogu82
是的 index
随时随地看视频慕课网APP
相关分类
Vue.js