您好,登錄后才能下訂單哦!
這篇“Vue.$set失效問(wèn)題怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“Vue.$set失效問(wèn)題怎么解決”文章吧。
有這樣一個(gè)需求 添加數(shù)據(jù)過(guò)濾用 左邊是控件選擇 中間是條件 右邊是值
因?yàn)闀?huì)根據(jù)控件不同渲染不同的值選項(xiàng)控件
<el-form inline > <el-form-item style="margin-bottom: 20px;"> <el-select v-model="data[props.prop]" @change="data[props.value] = """> <el-option v-for="item in controls" :key="item.id" :value="item.id" :label="item.label"> </el-option> </el-select> </el-form-item> <el-form-item style="margin-bottom: 20px;"> <el-select v-model="data[props.type]"> <el-option v-for="item in condition" :key="item.code" :value="item.code" :label="item.name" ></el-option> </el-select> </el-form-item> <el-form-item style="margin-bottom: 20px;"> <FormControl v-if="control" :control="control" :value="data[props.value]" @input="onValueChange" ></FormControl> <el-input v-else :value="data[props.value]" @input="onValueChange"></el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> </el-form-item> </el-form>
{ props:{ props: { type: Object, default: () => ({ prop: "prop", value: "value", type: "type" }) } }, data(){ return { data:{ } } }, methods:{ onValueChange(val){ this.$set(this.data, this.props.value, val) } } //... }
由于控件ID的不確定性 所有 data并不能提前預(yù)設(shè)好key 自然無(wú)法響應(yīng) 所以在onValueChange 使用了this.$set動(dòng)態(tài)添加數(shù)據(jù)實(shí)現(xiàn)響應(yīng)
復(fù)現(xiàn)可以發(fā)現(xiàn) 值輸入框內(nèi)的數(shù)據(jù)并不能實(shí)時(shí)響應(yīng)
明明用了$set卻不能響應(yīng) 一番排查后發(fā)現(xiàn)只要切換控件后 value值就不能響應(yīng) 但是只要在切換前隨便輸入點(diǎn)啥 再切換就沒(méi)問(wèn)題
又是一番排查后發(fā)現(xiàn)
<el-select v-model="data[props.prop]" @change="data[props.value] = """>
刪除@change事件后故障解決
問(wèn)題出現(xiàn)在 data[props.value] = ""
遂查看Vue源碼
//vue/src/core/observer/index.js 源碼片段 /** * Set a property on an object. Adds the new property and * triggers change notification if the property doesn"t * already exist. */ export function set (target: Array<any> | Object, key: any, val: any): any { if (process.env.NODE_ENV !== "production" && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } if (key in target && !(key in Object.prototype)) { target[key] = val return val } const ob = (target: any).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== "production" && warn( "Avoid adding reactive properties to a Vue instance or its root $data " + "at runtime - declare it upfront in the data option." ) return val } if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val }
可以發(fā)現(xiàn) 在defineReactive之前 判斷了key是否存在于對(duì)象之內(nèi) 若存在就跳過(guò)了
坑就在這 多次翻閱Vue.$set文檔并未發(fā)現(xiàn)$set不能為已存在的key添加監(jiān)測(cè)對(duì)象
刪除 data[props.value] = "" 改為 onValueChange("") 完美解決問(wèn)題
以上就是關(guān)于“Vue.$set失效問(wèn)題怎么解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。