快捷導(dǎo)航

vue中this.$set()的基本用法實例

更新時間：2023年01月15日 14:48:14 作者：紫米粥

最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實時更新視圖數(shù)據(jù),這個時候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關(guān)于vue中this.$set()的基本用法實例,需要的朋友可以參考下

1、this.$set()的作用

向響應(yīng)式對象中添加一個屬性，并確保這個新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。 this.$set()用于向響應(yīng)式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性。

簡單來說：就是我們在methods中給數(shù)據(jù)添加了一個屬性，我們能從控制臺能打印出來，但是視圖并沒有及時更新，所以無法顯示，但是借助于this.$set()方法我們就能成功的解決這個問題了，不僅能從控制臺打印出來我們想要的值，而且相應(yīng)的值也能實時刷新視圖。

2、this.$set()的語法

this.$set(target, propertyName/index, value)

（1）target: 要更改的數(shù)據(jù)源（可以是一個對象或者數(shù)組）

（2）propertyName/index: 要更改的具體數(shù)據(jù) （索引）

（3）value: 重新賦的值(any)

3、this.$set()的簡單案例

（1）前端代碼：

 <el-form>
                <el-form-item label="用戶地址" prop="aloWhTo">
                    <el-select v-model="form.aloWhTo" @change="testConsistent" placeholder="請選擇轉(zhuǎn)入倉庫" readonly filterable style="width:95%" >
                        <el-option v-for="item in WarehouseOptions" :key="item.whId" :label="item.whName" :value="item.whId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
<el-button type="primary"  @click="handClick()">更改數(shù)據(jù) </el-button>

（2）當我們點擊修改數(shù)據(jù)之后，我們會發(fā)現(xiàn)控制臺的信息變化了，但是下拉框中的數(shù)據(jù)沒有發(fā)生變化。

問題分析：當vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不會更新視圖的。

 handClick(){
                //不起作用
                this.WarehouseOptions[0] = { whId:'4',whName:'數(shù)據(jù)是否修改'}
                // let item = { whId:'4',whName:'數(shù)據(jù)是否修改'} //此時對象的值更改了，但是視圖沒有更新
                // this.$set(this.WarehouseOptions,0,item)
                console.log("測試 ")
                console.log(this.WarehouseOptions[0])
            },

（3）當我們采用this.$set()方法之后，問題解決。

 handClick(){
                //不起作用
                //this.WarehouseOptions[0] = { whId:'4',whName:'數(shù)據(jù)是否修改'}
                let item = { whId:'4',whName:'數(shù)據(jù)是否修改'} //此時對象的值更改了，但是視圖沒有更新
                this.$set(this.WarehouseOptions,0,item)
                console.log("測試 ")
                console.log(this.WarehouseOptions[0])
            },