vue指令意外影響未綁定輸入框的探究
本文分析一個Vue.JS自定義指令validatenumber意外影響未綁定輸入框的案例。該指令旨在限制輸入框只能輸入數字，并設置最小值和最大值。
問題描述:
我們定義了一個全局指令validateNumber：
Vue.directive('validateNumber', { bind(el, binding, vnode) { let lastData = null; el.onkeyup = (e) => { if (String.fromCharCode(e.keyCode) === 'E' || String.fromCharCode(e.keyCode) === 'KeyE') { e.target.value = lastData; return false; } else { lastData = e.target.value; } e.target.value = e.target.value.replace(/[^d]/ig, ''); let _this = vnode.context; _this.AccessNestedObject(_this, vnode.data.model.expression, e.target.value); // 此處邏輯可能存在問題，導致影響其他輸入框 if (binding.expression && e.target.value) { let obj = (new Function("return " + binding.expression))(); let keys = Object.keys(obj); let values = Object.values(obj); if (keys[0] === 'min') { if (e.target.value < values[1]) { e.target.value = values[1]; } } } el.dispatchEvent(new Event('input')); }; } });
在模板中，僅第一個輸入框使用了該指令：
立即學習“前端免費學習筆記（深入）”；
<el-form-item label="等待時間" prop="timeInterval"> <el-input id="alarm-rule-time-interval" style="width:100%" type="number" v-model="alertRulesForm.timeInterval" v-validateNumber> <template slot="append">秒</template> </el-input> </el-form-item> <el-form-item label="空間間隔" prop="distanceInterval"> <el-input id="alarm-rule-distance-interval" type="number" v-model="alertRulesForm.distanceInterval"> <template slot="append">米</template> </el-input> </el-form-item>
然而，第二個輸入框（未綁定v-validateNumber）也僅能輸入數字。
問題分析:
第二個輸入框的type=”number”屬性本身就限制了輸入。 關鍵在于validateNumber指令中的邏輯，特別是這部分：
_this.accessNestedObject(_this, vnode.data.model.expression, e.target.value);
以及后續的binding.expression判斷和最小值校驗。 這部分代碼很可能通過_this.accessNestedObject函數或者vnode.data.model.expression的方式間接修改了alertRulesForm.distanceInterval的值，或者觸發了其他更新數據的方式，從而影響了第二個輸入框。 accessNestedObject函數的具體實現未提供，但它很可能是問題的根源。 它可能直接或間接地修改了Vue實例的數據，導致數據變化，進而影響到所有綁定了相應數據的輸入框。
解決方案:
需要檢查accessNestedObject函數的實現，確保它只修改目標數據，避免意外影響其他數據。 建議修改指令邏輯，使其只操作綁定指令的元素，避免全局數據修改。 一個更安全的做法是將數據校驗邏輯直接放在v-model綁定的數據更新方法中，而不是在指令里處理。
通過修正accessNestedObject函數或重構指令邏輯，可以避免此問題。 建議使用更精細的數據處理方法，避免全局數據修改，從而確保指令只影響目標元素。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦
