小編給大家分享一下Vue中this.$set如何為data中某一對(duì)象添加一個(gè)屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)過程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

項(xiàng)目開發(fā)的過程中，經(jīng)常會(huì)遇到這種情況：為data中的某一個(gè)對(duì)象添加一個(gè)屬性以后，但是視圖層并沒有更新該數(shù)據(jù)。如 ：

    <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時(shí), 發(fā)現(xiàn)雖然對(duì)象 listCatchData[index] 已經(jīng)對(duì)應(yīng)了不同組的數(shù)據(jù)，但是視圖層并沒有更新該數(shù)據(jù)，是什么造成的呢？這是由于受JavaScript的限制，vue.js不能監(jiān)聽對(duì)象屬性的添加和刪除，因?yàn)樵趘ue組件初始化的過程中，會(huì)調(diào)用getter和setter方法，所以你添加的屬性必須已經(jīng)存在于data中，視圖層才會(huì)響應(yīng)該數(shù)據(jù)的變化。

那我們?nèi)绾问箆ue實(shí)例 data里的對(duì)象添加某一屬性后，視圖層也會(huì)更新該數(shù)據(jù)呢？

解決方發(fā):

1. this.$set(obj, key, value)

    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);//這時(shí)發(fā)現(xiàn)該對(duì)象已經(jīng)出現(xiàn)了getter與setter方法
        }

2.  Object.assign(target, sources)方法

        async getList(current) 
        {				 
		const res = await this.$myRequest({
				    url: 'uniapi/getList',					
                                    data:{catid:this.tab[current].catid}
		                })				
                                const {data} = res				 
				this.listCatchData[current] = data
			        this.listCatchData = Object.assign({},this.listCatchData)
        }

通過這兩種方式為對(duì)象添加屬性之后，他的對(duì)象身上多了get和set方法，所以，此時(shí)我們?cè)俅尾僮髟搶傩缘臅r(shí)候，就會(huì)引起視圖的更新。

以上是“Vue中this.$set如何為data中某一對(duì)象添加一個(gè)屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：Vue中this.$set如何為data中某一對(duì)象添加一個(gè)屬性
新聞來(lái)源：http://www.chinadenli.net/article26/gccpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、建站公司、企業(yè)網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)