Vue改變數(shù)組中對(duì)象的屬性不重新渲染View怎么辦

這篇文章主要介紹Vue改變數(shù)組中對(duì)象的屬性不重新渲染View怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

云陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,云陽網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為云陽上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的云陽做網(wǎng)站的公司定做！

在解決問題之前，我們先來了解下 vue響應(yīng)性原理： Vue最顯著的一個(gè)功能是響應(yīng)系統(tǒng)-- 模型只是一個(gè)普通對(duì)象，修改對(duì)象則會(huì)更新視圖。

受到j(luò)avascript的限制，Vue不能檢測(cè)到對(duì)象屬性的添加或刪除，因?yàn)関ue在初始化實(shí)列時(shí)將屬性轉(zhuǎn)為getter/setter，所以屬性必須在data對(duì)象上才能讓vue轉(zhuǎn)換它。

但是vue可以使用 Vue.set(object, key, value)方法將響應(yīng)屬性添加到嵌套的對(duì)象上：如下代碼:

Vue.set(obj, '_isHover', true);

或者可以使用vm.$set的實(shí)列方法，也是Vue.set方法的別名：

this.$set(obj, '_isHover', false);

問題：頁面上多個(gè)item項(xiàng)，當(dāng)我鼠標(biāo)移動(dòng)上去的時(shí)候，我想在該數(shù)組中的對(duì)象添加一個(gè)屬性 isHover=true, 當(dāng)鼠標(biāo)移出的時(shí)候，我想讓該屬性變?yōu)?isHover=false,然后希望改變對(duì)象的屬性的時(shí)候讓其重新渲染view層，重新執(zhí)行rowClasses方法，然后該方法會(huì)判斷 isHover是否等于true，如果為true的話，讓其增加一個(gè)類名。

代碼如下：



 
  演示Vue
  
 
 
  
   
    
     {{item.name}}

new Vue({ el: '#app', data: { items: [ {name: 'kongzhi'}, {name: 'longen'}, {name: 'tugenhua'} ] }, computed: { }, methods: { rowClasses (index) { return [ { [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover } ] }, handleMouseIn(index) { if (this.$data.items[index]._isHover) { return; } console.log(111); // 可以執(zhí)行到 this.$data.items[index]._isHover = true; }, handleMouseOut(index) { this.$data.items[index]._isHover = false; } } });

查看效果

可以看到鼠標(biāo)移動(dòng)上去的時(shí)候沒有效果。

解決的方案如下：

1. 使用 Object.assign

鼠標(biāo)移動(dòng)上去的時(shí)候代碼可以改成如下:

this.$data.items[index]._isHover = true;
this.$data.items = Object.assign({}, this.$data.items);

鼠標(biāo)移出的時(shí)候，代碼改成如下：

this.$data.items[index]._isHover = false;
this.$data.items = Object.assign({}, this.$data.items);

代碼如下：



 
  演示Vue
  
 
 
  
   
    
     {{item.name}}

new Vue({ el: '#app', data: { items: [ {name: 'kongzhi'}, {name: 'longen'}, {name: 'tugenhua'} ] }, computed: { }, methods: { rowClasses (index) { return [ { [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover } ] }, handleMouseIn(index) { if (this.$data.items[index]._isHover) { return; } console.log(111); // 可以執(zhí)行到 this.$data.items[index]._isHover = true; this.$data.items = Object.assign({}, this.$data.items); }, handleMouseOut(index) { this.$data.items[index]._isHover = false; this.$data.items = Object.assign({}, this.$data.items); } } });

查看效果

2. 使用Vue.set(object, key, value)方法將響應(yīng)屬性添加到嵌套的對(duì)象上。

鼠標(biāo)移動(dòng)上去的時(shí)候代碼可以改成如下:

this.$set(this.$data.items[index], '_isHover', true);

鼠標(biāo)移出的時(shí)候，代碼改成如下：

this.$set(this.$data.items[index], '_isHover', false);

所有的代碼如下：



 
  演示Vue
  
 
 
  
   
    
     {{item.name}}

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue改變數(shù)組中對(duì)象的屬性不重新渲染View怎么辦

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管