VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯位問題及解決方法
問題：
VUE自定義指令v-permisson 修改了元素是否隱藏，和v-if一起用時，多個按鈕元素同時使用v-permisson和v-if控制展示，后面的v-if=false的按鈕元素被消除，其v-permisson的控制效果修改了上一個v-if=true的按鈕元素。元素屬性修改錯位
猜測原因：
v-if=false DOM元素未創(chuàng)建，v-permisson的el參數(shù)實際修改操作時定位到了錯誤的元素上
解決：
1.合并v-v-if的參數(shù)到v-permisson參數(shù)里
2.v-permisson 支持對象傳參，可以控制元素的屬性 也可以 用el.remove()刪除當(dāng)前元素。
3.利用vue的雙向綁定重新渲染DOM元素，重新刷新元素屬性（未生成的元素，刷新后也可以重新生成），具體寫法元素綁定值附空值 如 this.orderList = [] ，隨后在賦值實際的數(shù)據(jù)。
v-permisson 案例代碼如下：
export default {
bind(el, binding) {
dateDeal(el, binding)
},
update(el, binding) {
dateDeal(el, binding)
},
unbind(el, binding) {
}
}
// 本指令與v-if沖突 刪除的元素賦值會錯改其他元素的屬性***
function dateDeal(el, binding) {
// 數(shù)據(jù)校驗
if (binding.value === null || binding.value === undefined) {
el.remove()
return
}
var permission
var condition
if (binding.value.code !== undefined) {
// 對象入?yún)?
permission = binding.value.code + ‘'
condition = binding.value.condition
}
…
}調(diào)用：666
到此這篇關(guān)于VUE2.0 自定義指令與v-if沖突 導(dǎo)致元素屬性修改錯位解決的文章就介紹到這了,更多相關(guān)vue自定義指令與v-if沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)輸入框自動跳轉(zhuǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序
這篇文章主要為大家詳細(xì)介紹了使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
如何基于vue-cli3.0構(gòu)建功能完善的移動端架子
這篇文章主要介紹了基于vue-cli3.0構(gòu)建功能完善的移動端架子，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文給大家分析下vue2.0幾個重要的與自己目前項目相關(guān)的變化，也是vue2.0不可忽視的變化，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
實現(xiàn)小游戲可以鍛煉自己的邏輯思維能力，也不會很枯燥，完成時會給自己帶來一種滿足感。本文就將利用Vue和JS實現(xiàn)簡單的掃雷小游戲，需要的可以參考一下2022-06-06
npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案,關(guān)于這個問題,通常是由于插件名稱輸入錯誤、網(wǎng)絡(luò)問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04