當(dāng)vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組(數(shù)組里邊的值是對(duì)象)時(shí)擒悬,向?qū)ο笾刑砑有碌膶傩裕绻麓藢傩缘闹担遣粫?huì)更新視圖的奴紧。
```
<template>
? ? <div id="app2">
? ? ? ? <p v-for="item in items" :key="item.id">{{item.message}}</p>
? ? ? ? <button class="btn" @click="handClick()">更改數(shù)據(jù)</button>? ?
? ? </div>
</template>
<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? items: [
? ? ? ? ? ? ? ? { message: "one", id: "1" },
? ? ? ? ? ? ? ? { message: "two", id: "2" },
? ? ? ? ? ? ? ? { message: "three", id: "3" }
? ? ? ? ? ? ]
? ? ? ? };
? ? },
? ? mounted(){
? ? ? ? this.items[0]={message:"測(cè)試",id:"4"};? //此時(shí)對(duì)象的值更改了,但是視圖沒(méi)有更新
? ? ? ? this.$set(this.items,0,{message:"測(cè)試",id:"4"})晶丘; //$set可以觸發(fā)更新視圖
? ? ? ? console.log(this.items)
? ? },
? ? methods: {
? ? ? ? // 調(diào)用方法:Vue.set( target, key, value )
? ? ? ? // target:要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)
? ? ? ? // key:要更改的具體數(shù)據(jù)
? ? ? ? // value :重新賦的值
? ? ? ? handClick() {
? ? ? ? ? ? //Vue methods中的this 指向的是Vue的實(shí)例黍氮,這里可以直接在this中找到items
? ? ? ? ? ? this.$set(this.items, 0, { message: "更改one的值", id: "0" });
? ? ? ? },
? ? }
};
</script>
```