快捷導(dǎo)航

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

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

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

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

方法一

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

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

方法二

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

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

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

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

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

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

還有一點(diǎn)需要注意：

如果通過(guò)直接賦值或者改變長(zhǎng)度是無(wú)法讓界面刷新的。

（1）通過(guò)索引直接設(shè)置項(xiàng)。

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

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

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

注意在axios的then方法中調(diào)用對(duì)象時(shí)，不能使用this對(duì)象，因?yàn)榇藭r(shí)this對(duì)象指的是axios實(shí)例，所以通過(guò)this是獲取不到vue實(shí)例中的data數(shù)據(jù)的，必須在外界使用一個(gè)值來(lái)指向vue實(shí)例對(duì)象，通過(guò)這個(gè)外部對(duì)象來(lái)賦值，才是正確的。

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));
? ? ? ? ? });
}

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

您可能感興趣的文章: