這篇“怎么用vue的$set實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么用vue的$set實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”文章吧。

創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為隧道混凝土攪拌車行業(yè)客戶提供了網(wǎng)站維護(hù)服務(wù)。

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)能打印出來(lái)，但是卻沒有更新到視圖上時(shí)，也許這個(gè)時(shí)候就需要用到this.$set（）這個(gè)方法了，簡(jiǎn)單來(lái)說this.$set的功能就是解決這個(gè)問題的啦。

官方解釋：向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無(wú)法探測(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í)候，界面是這樣的，雖然界面沒有顯示出來(lái)，但是控制臺(tái)已經(jīng)打印出來(lái)了

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

以上就是關(guān)于“怎么用vue的$set實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：怎么用vue的$set實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article26/jipjcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站建設(shè)、Google、電子商務(wù)、搜索引擎優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)