vue.js data中数组为简单数组时添加相同元素原先已渲染的元素会被替换？

Vue.js

福卡 2016-09-20 09:34:22

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>  <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 回答

福卡

TA贡献2条经验获得超3个赞

找到问题了

自问自答：

<li v-for="todo in todos" >中添加 track-by="$index" 变成

如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值

3 反对回复 2016-09-21

guogu82

TA贡献2条经验获得超1个赞

是的 index

1 反对回复 2016-09-21

热搜

最近搜索清空

vue.js data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换？

vue.js data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换？

2 回答

添加回答

vue.js data中数组为简单数组时添加相同元素原先已渲染的元素会被替换？

vue.js data中数组为简单数组时添加相同元素原先已渲染的元素会被替换？