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

這篇文章主要介紹了vue怎么給數(shù)組添加新對象并賦值的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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));
          });
}

關(guān)于“vue怎么給數(shù)組添加新對象并賦值”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么給數(shù)組添加新對象并賦值”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。