有如下代码:
// 有一个数组
let dataAry = [{name: 'haha', age: 20},{name: 'hello', age: 21}
]
// 这个数组在模板中使用了v-for进行循环
v-for="one of dataAry" :name="one.name"
:address="one.address"// 子组件中使用如下:
<template><div>{{ address }}</div></template>
props: ['address']// 如果修改如下:
dataAry.find(item => item.name == 'hello').address = '北京朝阳'
// 会发现模板中并未更新address
上述例子中,因为dataAry在定义时,没有定义address属性,所以后续修改此属性,vue不会监察它的更新情况。
一般来说,如果一个对象数组,如果直接修改某个元素中的属性时,使用:
this.$set(ary[index], '属性名', 属性值)
可以成功赋值。但是如果在定义这个对象时,没有这个属性(本例情况),那么在后续赋值后,vue就无法记录更新情况。