V-for的key,无法使用数值类型
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
当使用:key=index
时,列表依然为就地更新的模式,如图所示:
只有当:key=value
的时候,才会正常更新,如下图所示:
可是官方教程中提到,可以使用数值类型作为v-for
的key
:
不要使用对象或数组之类的非基本类型值作为
v-for
的key
。请用字符串或数值类型的值。
这个情况是为什么呢?谢谢各位
代码如下:
.html
代码
<div id="app">
<ul>
<li v-for="value, index in array" :key=index>
{{value}} : <input>
index的数据类型为:{{typeof(index)}}
</li>
<button @click="changeArr">按钮</button>
</ul>
</div>
.js
代码
var vm = new Vue({
el: "#app",
data: {
array: ['one', 'three', 'four']
},
methods: {
changeArr: function () {
this.array.splice(1,0,'two');
}
},
});