vue 對象添加或刪除成員時無法實時更新的解決方法

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

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

前陣子將項目搬上Vue的時候偶遇一個突發(fā)問題

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

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

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

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

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

在實例內部可以用$set和$delete

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

也可以直接調用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ù)組和對象進行增加刪除字段不更新數(shù)據的解決方法 — 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ù)據是無法重新渲染的
      }
    }
  }
</script>

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

解決方法：

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

利用Vue.set方法

具體實現(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.給對象增加新屬性（同理）

<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'); //起作用 
  }
},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: