有如下代碼:
// 有一個數組
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就無法記錄更新情況。