快捷導(dǎo)航

vue如何給數(shù)組添加新對象并賦值

更新時間：2022年04月20日 14:17:39 作者：今天代碼敲了嗎

這篇文章主要介紹了vue如何給數(shù)組添加新對象并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

給數(shù)組添加新對象并賦值

方法一

適用于數(shù)組就只有一組

listData: [{name:"張三",age:18}],
//直接添加對象
listData.sex="男"

方法二

適用于數(shù)組中有多組信息

listData:[],
list:[{"張三","李四"}]
//比如想把另外一個數(shù)組中編列出來的值加入到這個數(shù)組中
? ?for (let index = 0; index < this.listlist.length; index++) {
? ? ? ? ? this.listData.push({ name: "" });
? ? ? ? ? this.listData[index].name= this.list[index];
? ? ? ? }

數(shù)組賦值踩過的坑及解決

最近需要在Vue當(dāng)中完成動態(tài)賦值數(shù)組操作，從服務(wù)器拿到數(shù)據(jù)后，刷新數(shù)組中的數(shù)據(jù)，但是發(fā)現(xiàn)無論使用什么方法都不行，通過打log,發(fā)現(xiàn)數(shù)據(jù)在這里就無法向下執(zhí)行，而且也沒有報任何的異常，最終問題解決，在這里做個記錄。

Vue中的數(shù)組賦值和在普通的JS中賦值還是有所區(qū)別。

以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice
以下操作不會引起界面刷新：slice，concat ，filter

還有一點需要注意：

如果通過直接賦值或者改變長度是無法讓界面刷新的。

（1）通過索引直接設(shè)置項。

（2）修改數(shù)組長度，mylist.length=3

第二點，在從服務(wù)器中獲取數(shù)據(jù)后賦值需要注意一個問題：主體對象的改變。

比如在使用axios對象發(fā)起請求后，在返回方法中處理數(shù)據(jù)需要注意：

注意在axios的then方法中調(diào)用對象時，不能使用this對象，因為此時this對象指的是axios實例，所以通過this是獲取不到vue實例中的data數(shù)據(jù)的，必須在外界使用一個值來指向vue實例對象，通過這個外部對象來賦值，才是正確的。

var self;
created:function(){
self = this;
},
mouted:function(){ ? ? ? ?
axios.create({
? ? ? ? baseURL: 'url',
? ? ? ? timeout: 10000,
? ? ? ? headers: { 'Content-Type': 'application/json' }
? ? ? }).get('xxxxxxxxxx')
? ? ? ? ? .then(function(response){
? ? ? ? ? ? if(response.data.dataList.length>0){
? ? ? ? ? ? ? var datalist = response.data.dataList;
? ? ? ? ? ? ? for(var i=0;i<datalist.length;i++){
? ? ? ? ? ? ? ? self.DeviceTypeList.push({devicetype:datalist[i].name});
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? console.log(JSON.stringify(error));
? ? ? ? ? });
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: