Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
使用this.$set()新增數(shù)據(jù),更新視圖
描述
如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新
簡單的講就是
在頁面渲染完成之后,對data里的某個數(shù)組或?qū)ο筮M行新增刪除屬性操作是監(jiān)聽不到的,視圖不會更新
<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) ? ? ? },
可以看到點擊按鈕之后,打印出的數(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ù)源(可以是一個對象或者數(shù)組)key
: 要更改的具體數(shù)據(jù)(索引)value
: 新增的值
刪除屬性可以使用this.$delete(target,key)
this.$delete(that.info,"name")
說說vue.set() (this.$set)用法
這段時間工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實時更新視圖數(shù)據(jù),這個時候首先想到的是 vue.set() 方法(注:當發(fā)現(xiàn)model上的數(shù)據(jù)發(fā)生改變,而頁面上的視圖數(shù)據(jù)沒有改變,推薦使用該方法),該方法的使用首先要在頁面引入vue,應(yīng)該這樣寫:import Vue from 'vue',這樣才能在組件全局獲取到vue這個實例對象。
如果你覺得引入麻煩,推薦使用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}) }
從上代碼可知,點擊事件clickProvince( ),可以改變數(shù)組 this.provinceArrs 中指定下標 pindex 的值并實時更新頁面的視圖,這樣就極大的方便了操作數(shù)組中的某項值,使用示列:this.$set(arr, index, val)。
當然,this.$set除了用于操作數(shù)組外還可以操作對象,使用示例:this.$set( obj, key, val).
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的方法
在Web開發(fā)中經(jīng)常需要使用圖片,有時候需要對圖片進行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04Element的Pagination分頁sync問題小結(jié)
本文主要介紹了Element的Pagination分頁sync問題小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07VUE之關(guān)于store狀態(tài)管理核心解析
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06如何使用Vue3實現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標記高亮顯示
高亮顯示是我們?nèi)粘i_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3實現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標記高亮顯示的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11詳解關(guān)于Vuex的action傳入多個參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個參數(shù)的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu),el-tree組件中filter-node-method事件便可以實現(xiàn)樹形菜單篩選過濾功能,需要的朋友可以參考下2022-04-04vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04