[Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性
由于 JavaScript 的限制，Vue 不能检测以下变动的数组当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。
·
由于 JavaScript 的限制，Vue 不能检测以下变动的数组
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。
同样，Vue也不能检测对象属性的添加或删除
这有一点需注意，也是差点被教程带进坑里。不是不能使用数组索引，可以使用，使用场景是将对
象
数组内部的对象属性更新，而不是直接设置修改数组，这就像使用push方法是更新数组而不是设置数组一样。例如对对象数组某项的属性的修改：vm.items[indexOfItem].prop = newValue
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-for-item-index</title>
<style type="text/css"></style>
<script src = "https://unpkg.com/vue"></script>
</head>
<body>
<ul id='example-2'>
<li v-for='(item,index) in items' v-bind:key=item.id>
{{parentMessage}} - {{index}} - {{item.message}}
</li>
<button @click='insert'>ss</button>
</ul>
<script>
var vm = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items:[
{message: '学习JavaScript'},
{message: '学习jQuery'},
{message: '学习Vue'}
]
},
methods:{
//不能触发状态更新，用Vue.set或splice
insert: function () {
// 直接赋值不行
// this.items[1] = ({message: '学习个屁'});
// 更新数组允许
this.items[1].message = '学习个屁';
}
}
});
</script>
</body>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)