Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖

更新時(shí)間：2022年06月29日 08:38:13 作者：倘若hfl

這篇文章主要介紹了Vue中使用this.$set()實(shí)現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用this.$set()新增數(shù)據(jù),更新視圖

描述

如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新

簡(jiǎn)單的講就是

在頁(yè)面渲染完成之后，對(duì)data里的某個(gè)數(shù)組或?qū)ο筮M(jìn)行新增刪除屬性操作是監(jiān)聽不到的，視圖不會(huì)更新

<div id='app'>
? ? <el-button @click="setinfo">新增屬性</el-button>
? ? <div v-for="item in info">{{item}}</div>
? </div>

data: {
? ? ? info: {
? ? ? ? id: 1,
? ? ? ? name: '老王',
? ? ? }
? ? },
setinfo() {
? ? ? ? let that = this
? ? ? ? that.info.age = 11
? ? ? ? console.log(that.info)
? ? ? },

可以看到點(diǎn)擊按鈕之后，打印出的數(shù)據(jù)中有age，但是視圖沒更新

正確的應(yīng)該是使用this.$set

setinfo() {
        let that = this
        that.$set(that.info,'age','11')
        console.log(that.info)
      }

this.$set(target, key, value)

target: 要更改的數(shù)據(jù)源(可以是一個(gè)對(duì)象或者數(shù)組)
key: 要更改的具體數(shù)據(jù)(索引)
value: 新增的值

刪除屬性可以使用this.$delete(target,key)

this.$delete(that.info,"name")

說說vue.set() (this.$set)用法

這段時(shí)間工作上經(jīng)常操作數(shù)組數(shù)據(jù)，并且要求實(shí)時(shí)更新視圖數(shù)據(jù)，這個(gè)時(shí)候首先想到的是 vue.set() 方法（注：當(dāng)發(fā)現(xiàn)model上的數(shù)據(jù)發(fā)生改變，而頁(yè)面上的視圖數(shù)據(jù)沒有改變，推薦使用該方法），該方法的使用首先要在頁(yè)面引入vue,應(yīng)該這樣寫：import Vue from 'vue'，這樣才能在組件全局獲取到vue這個(gè)實(shí)例對(duì)象。

如果你覺得引入麻煩，推薦使用vue.set的別名this.$set。

那么現(xiàn)在上代碼：

HTML:

<ul class="province_area_style province_area">
? ? ? ? ? ? <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
? ? ? ? ? </ul>

JS:

clickProvince(pindex, pitem) {
? ? ? pitem.checkOn = !pitem.checkOn
? ? ? pitem.checkOff = !pitem.checkOff
? ? ? this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

從上代碼可知，點(diǎn)擊事件clickProvince( )，可以改變數(shù)組　this.provinceArrs　中指定下標(biāo)　pindex　的值并實(shí)時(shí)更新頁(yè)面的視圖，這樣就極大的方便了操作數(shù)組中的某項(xiàng)值，使用示列：this.$set(arr, index, val)。

當(dāng)然，this.$set除了用于操作數(shù)組外還可以操作對(duì)象，使用示例：this.$set( obj, key, val).

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

您可能感興趣的文章: