https://www.jb51.net/article/169428.htm
當vue的data里邊聲明或者已經賦值過的對象或者數組（數組里邊的值是對象）時，向對象中添加新的屬性，如果更新此屬性的值，是不會更新視圖的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<
template
>
<
div
id
=
"app"
>
<
p
v-for
=
"item in items"
:key
=
"item.id"
>{{item.message}}</
p
>
<
button
class
=
"btn"
@
click
=
"handClick()"
>更改數據</
button
>
</
div
>
</
template
>
<
script
>
export default {
name: 'App',
data () {
return {
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
}
},
mounted () {
this.items[0] = { message:'first',id:'4'} //此時對象的值更改了，但是視圖沒有更新
// let art = {message:'first',id:"4"}
// this.$set(this.items,0,art) //$set 可以觸發更新視圖
},
methods: {
handClick(){
let change = this.items[0]
change.message="shen"
this.$set(this.items,0,change)
}
}
}
</
script
>
<
style
>
</
style
>
|
調用方法: Vue.set( target , key , value)
- target: 要更改的數據源（可以是一個對象或者數組）
- key 要更改的具體數據 （索引）
- value 重新賦的值