Vue this.$set為data中的某一物件新增一個屬性

專案開發的過程中，常常會遇到這種情況：為data中的某一個物件新增一個屬性以後，但是視圖層並沒有更新該資料。如 ：

    <template>
	<swiper class="home-swiper" :current="activeIndex" @change="change">
		<swiper-item v-for="(item,index) in tab" :key="index">
			<view class="swiper-item">
				<listItem :list="listCatchData[index]"></listItem>
			</view>
		</swiper-item>

	</swiper></template>

    data() {			
        return {	
          list: [],				    
		    listCatchData:{}
	        }
	}

        如上所示, 切換swiper時, 發現雖然對象 listCatchData[index] 已經對應了不同組的數據，但是視圖層並沒有更新該數據視圖，是什麼造成的呢？這是由於受JavaScript的限制，vue.js無法監聽物件屬性的加入與刪除，因為在vue元件初始化的過程中，會呼叫getter和setter方法，所以你新增的屬性必須已經存在於data中，視圖層才會響應該數據的變化。 【相關推薦：《vue.js教學》】

        那我們如何讓vue實例 data裡的物件新增某一屬性後，視圖層也會更新該資料呢？

        

        與已使用：

        1. .assign(target, sources)方法

    async getList(current) 
    {				 
		const res = await this.$myRequest({
				    url: 'uniapi/getList',					
                    data:{catid:this.tab[current].catid}
		                })				
                const {data} = res				 
				this.$set(this.listCatchData,current,data)
			    console.log(this.listCatchData);//这时发现该对象已经出现了getter与setter方法
        }

        透過這兩種方式為物件新增屬性之後，祂的物件身上多了get和set方法，所以，此時我們再次操作該屬性的時候，就會造成視圖的更新。

相關推薦：

#最新的5個vue.js影片教學精選

#2021年最新uni-app影片教學推薦（從入門到精通）

#

以上是Vue this.$set為data中的某一物件新增一個屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！