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