vue $set如何實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值

本篇內(nèi)容主要講解“vue $set如何實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue $set如何實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”吧!

vue $set 數(shù)組集合對(duì)象賦值

在vue自定義數(shù)組對(duì)象集合中，想要給每個(gè)數(shù)組對(duì)對(duì)象再添加一個(gè)屬性和值。

// data定義一個(gè)集合對(duì)象
responseData:[
      {'id':'1','name':'女裝','price':115,'num':1,'pic':'../static/img/1.jpg'},
      {'id':'2','name':'男裝','price':110,'num':1,'pic':'../static/img/2.jpg'},
      {'id':'3','name':'童裝','price':118,'num':2,'pic':'../static/img/3.jpg'}
],

// vue方法請(qǐng)求返回集合對(duì)象數(shù)據(jù)
if(res.data.code === 'ok'){
 that.totals = res.data.data.total;
 that.questionList = res.data.data.list;
 
}

// 賦值操作
for(let val of that.questionList){
//此處為重點(diǎn)
hat.$set(val,'discussAnswer','0');
}

Vue this.$set的用法

解決數(shù)組、對(duì)象修改后不更新問題

一、this.$set實(shí)現(xiàn)什么功能，為什么要用它？

當(dāng)你發(fā)現(xiàn)你給對(duì)象加了一個(gè)屬性，在控制臺(tái)能打印出來，但是卻沒有更新到視圖上時(shí)，也許這個(gè)時(shí)候就需要用到this.$set（）這個(gè)方法了，簡(jiǎn)單來說this.$set的功能就是解決這個(gè)問題的啦。

官方解釋：向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無法探測(cè)普通的新增屬性 (比如 this.myObject.newProperty = ‘hi').

二、怎么用它？

舉個(gè)例子：

1.Vue寫在template中的代碼：

<div v-for="(item,index) in list" :key="index"
>{{item.name}}
</div>
<button @click="changeValue" type="primary">改變值</button>
</div>

2.export default{}中data數(shù)據(jù)

data(){
    return {
      list:[
        {name:'29Kun',id:1},
        {name:'299Kun',id:2},
      ]
    } 
  }

3.點(diǎn)擊按鈕觸發(fā)changeValue方法

mounted(){
  this.list[2] = {name:'2999Kun',id:3}
  console.log(this.list[0]);
}, 
methods: {
  changeValue(){
    this.$set(this.list,2,{name:'2999kun',id:3})
  }
}

調(diào)用方法：this.$set( target, key, value )

target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)

key：要更改的具體數(shù)據(jù)

value ：重新賦的值

4.在沒有點(diǎn)擊按鈕的時(shí)候，界面是這樣的，雖然界面沒有顯示出來，但是控制臺(tái)已經(jīng)打印出來了

5.當(dāng)點(diǎn)擊按鈕的時(shí)候，調(diào)用this.$set方法，成功顯示第三個(gè)屬性。

到此，相信大家對(duì)“vue $set如何實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！