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ì)象修改后不更新問(wèn)題
一、this.$set實(shí)現(xiàn)什么功能，為什么要用它？
當(dāng)你發(fā)現(xiàn)你給對(duì)象加了一個(gè)屬性，在控制臺(tái)能打印出來(lái)，但是卻沒(méi)有更新到視圖上時(shí)，也許這個(gè)時(shí)候就需要用到this.$set（）這個(gè)方法了，簡(jiǎn)單來(lái)說(shuō)this.$set的功能就是解決這個(gè)問(wèn)題的啦。
官方解釋?zhuān)合蝽憫?yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無(wú)法探測(cè)普通的新增屬性 (比如 this.myObject.newProperty = ‘hi').
二、怎么用它？
舉個(gè)例子：
1.Vue寫(xiě)在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.在沒(méi)有點(diǎn)擊按鈕的時(shí)候，界面是這樣的，雖然界面沒(méi)有顯示出來(lái)，但是控制臺(tái)已經(jīng)打印出來(lái)了
5.當(dāng)點(diǎn)擊按鈕的時(shí)候，調(diào)用this.$set方法，成功顯示第三個(gè)屬性。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vuex中的state使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue項(xiàng)目中axios配置方式(代理配置),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本文主要介紹了vue2之vue.config.js最全配置教程,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue 監(jiān)聽(tīng)input輸入事件(oninput)的示例代碼支持模糊查詢(xún)
這篇文章主要介紹了vue 監(jiān)聽(tīng)input輸入事件(oninput)支持模糊查詢(xún),比如說(shuō)表格模糊查詢(xún)，實(shí)現(xiàn)一邊輸入，一邊過(guò)濾數(shù)據(jù)，本文通過(guò)示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02
在移動(dòng)端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動(dòng)端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗(yàn)與移動(dòng)端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue之this.$router.push頁(yè)面刷新問(wèn)題
這篇文章主要介紹了vue之this.$router.push頁(yè)面刷新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問(wèn)題的解決辦法,文中通過(guò)代碼將解決的辦法介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的朋友具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10