vue $set 實(shí)現(xiàn)給數(shù)組集合對象賦值
vue $set 數(shù)組集合對象賦值
在vue自定義數(shù)組對象集合中，想要給每個(gè)數(shù)組對對象再添加一個(gè)屬性和值。
// data定義一個(gè)集合對象
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方法請求返回集合對象數(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ù)組、對象修改后不更新問題
一、this.$set實(shí)現(xiàn)什么功能，為什么要用它？
當(dāng)你發(fā)現(xiàn)你給對象加了一個(gè)屬性，在控制臺能打印出來，但是卻沒有更新到視圖上時(shí)，也許這個(gè)時(shí)候就需要用到this.$set（）這個(gè)方法了，簡單來說this.$set的功能就是解決這個(gè)問題的啦。
官方解釋：向響應(yīng)式對象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性，因?yàn)?Vue 無法探測普通的新增屬性 (比如 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ù)源(可以是對象或者數(shù)組)
key：要更改的具體數(shù)據(jù)
value ：重新賦的值
4.在沒有點(diǎn)擊按鈕的時(shí)候，界面是這樣的，雖然界面沒有顯示出來，但是控制臺已經(jīng)打印出來了
5.當(dāng)點(diǎn)擊按鈕的時(shí)候，調(diào)用this.$set方法，成功顯示第三個(gè)屬性。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?的核心功能之一在于?props?的使用,props?是我們在?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時(shí)使用它們,需要的朋友可以參考下2024-03-03
關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問題
這篇文章主要介紹了關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見使用的就是Vue配套的Vue Router庫，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過創(chuàng)建一個(gè)簡單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
ElementUI中<el-form>標(biāo)簽中ref、:model、:rules的作用淺析
Element官方文檔中寫到,model是表單數(shù)據(jù)對象,rules是表單驗(yàn)證規(guī)則,下面這篇文章主要給大家介紹了關(guān)于ElementUI中<el-form>標(biāo)簽中ref、:model、:rules作用的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)動(dòng)態(tài)路由的方法及路由原理解析
這篇文章主要介紹了路由原理及vue實(shí)現(xiàn)動(dòng)態(tài)路由,Vue Router 提供了豐富的 API，可以輕松地實(shí)現(xiàn)路由功能，并支持路由參數(shù)、查詢參數(shù)、命名路由、嵌套路由等功能，可以滿足不同應(yīng)用程序的需求，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了vue-router 路由元信息，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue style width a href動(dòng)態(tài)拼接問題的解決
這篇文章主要介紹了vue style width a href動(dòng)態(tài)拼接問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目每30秒刷新1次接口的實(shí)現(xiàn)方法
在vue.js項(xiàng)目中，經(jīng)常需要對數(shù)據(jù)實(shí)時(shí)更新——每隔xx秒需要刷新一次接口——即需要用到定時(shí)器相關(guān)原理。這篇文章主要介紹了vue項(xiàng)目每30秒刷新1次接口的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12