Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
使用this.$set()新增數(shù)據(jù),更新視圖
描述
如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上,它不會(huì)觸發(fā)視圖更新
簡(jiǎn)單的講就是
在頁(yè)面渲染完成之后,對(duì)data里的某個(gè)數(shù)組或?qū)ο筮M(jìn)行新增刪除屬性操作是監(jiān)聽(tīng)不到的,視圖不會(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,但是視圖沒(méi)更新
正確的應(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")
說(shuō)說(shuō)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ù)沒(méi)有改變,推薦使用該方法),該方法的使用首先要在頁(yè)面引入vue,應(yīng)該這樣寫(xiě):import Vue from 'vue',這樣才能在組件全局獲取到vue這個(gè)實(shí)例對(duì)象。
如果你覺(jué)得引入麻煩,推薦使用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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開(kāi)發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04Element的Pagination分頁(yè)sync問(wèn)題小結(jié)
本文主要介紹了Element的Pagination分頁(yè)sync問(wèn)題小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹
這篇文章主要介紹了在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08VUE之關(guān)于store狀態(tài)管理核心解析
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個(gè)"關(guān)鍵詞"標(biāo)記高亮顯示
高亮顯示是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常會(huì)遇到的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個(gè)"關(guān)鍵詞"標(biāo)記高亮顯示的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問(wèn)題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開(kāi)發(fā)樹(shù)形菜單結(jié)構(gòu),el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹(shù)形菜單篩選過(guò)濾功能,需要的朋友可以參考下2022-04-04vue-cli3 項(xiàng)目?jī)?yōu)化之通過(guò) node 自動(dòng)生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項(xiàng)目?jī)?yōu)化之通過(guò) node 自動(dòng)生成組件模板 generate View、Component的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話,此篇文章會(huì)對(duì)你有所幫助的,需要的朋友可以參考下2018-05-05