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