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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供獨(dú)山網(wǎng)站建設(shè)、獨(dú)山做網(wǎng)站、獨(dú)山網(wǎng)站設(shè)計(jì)、獨(dú)山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、獨(dú)山企業(yè)網(wǎng)站模板建站服務(wù)，十年獨(dú)山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

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

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

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

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

在實(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)

組件基本代碼：

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

點(diǎn)擊按鈕操作ceshi事件前后，沒(méi)發(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'}]

 {{ i }}--{{ j }}


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

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

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。