vue 對(duì)象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法

更新時(shí)間：2019年05月01日 14:23:41 作者：web窩

這篇文章主要介紹了vue 對(duì)象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前陣子將項(xiàng)目搬上Vue的時(shí)候偶遇一個(gè)突發(fā)問題

當(dāng)對(duì)象添加或刪除成員時(shí)頁(yè)面無法實(shí)時(shí)更新渲染，但是數(shù)組是正常的

目測(cè)是ob沒有監(jiān)聽到對(duì)象的成員有變化

查看一些大家的求助回答是說ob監(jiān)聽的是數(shù)組length的變動(dòng) 對(duì)象默認(rèn)沒有l(wèi)ength 新增成員時(shí)不會(huì)自增length

所以監(jiān)聽不到對(duì)象的變化最近大腦過于疲憊懶得看文檔了。。。

不多廢話解決方式直接上代碼

在實(shí)例內(nèi)部可以用$set和$delete

this.$set(this.age,'age',18);
this.$delete(this.age,'age');

也可以直接調(diào)用Vue的set和delete

let vm = new Vue({
  el : '#app',
  data : {
    age:{}
  }
});
Vue.set(vm.age,'age',18);
Vue.delete(vm.age,'age');

PS:vue給數(shù)組和對(duì)象進(jìn)行增加刪除字段不更新數(shù)據(jù)的解決方法 — Vue.set(object, key, value)

組件基本代碼：

<style lang="sass">

</style>
<template>
<div>
  <div>
    <div>

    </div>
  </div>
</div>
</template>
<script>
  export default {
    data(){
      return {

      }
    },
    methods: {
      ceshi(){

      }
    }
  }
</script>

1.數(shù)組的增加，刪除(數(shù)組的push等方法排除)

</style>
<template>
<div>
  <div>
    <div>
      <div v-for="item in items">
        <span>{{ item }}</span>
      </div>
      <button @click="ceshi">anniu</button>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    data(){
      return {
        items: [11,22],
        obj: { a: 'aa', b: 'bb' }
      }
    },
    methods: {
      ceshi(){
        this.items[2] = 33; // 這樣的寫法數(shù)據(jù)是無法重新渲染的
      }
    }
  }
</script>

點(diǎn)擊按鈕操作ceshi事件前后，沒發(fā)生變化

解決方法：

就是利用數(shù)據(jù)的push方法是可以實(shí)現(xiàn)的

利用Vue.set方法

具體實(shí)現(xiàn)如下：

methods: {
  ceshi(){
    this.$set(this.items, 2, 33)
  }
},

同理，如果items: [{a: ‘11'}] –> items: [{a: ‘11', b: ‘22'}]

<div v-for="item in items">
 <span v-for="(i, j) in item">{{ i }}--{{ j }}</span>
</div>

this.items[0] = Object.assign({}, this.items[0], { b: '22' });
this.$set(this.items, 0, this.items[0]);

2.給對(duì)象增加新屬性（同理）

<template>
  <div>
    <div v-for="item in obj">
     <span>{{ item }}</span>
    </div>
  </div>
</template>

data(){
  return {
    obj: { a: 'aa', b: 'bb' }
  }
}

methods: {
  ceshi(){
    this.obj['c'] = '000'; // 不起作用
    this.$set(this.obj, 'c', '000'); //起作用 
  }
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: