vue中v-if?和v-permission?共同使用的坑及解決方案
背景
后臺系統(tǒng)某功能按鈕需要訂單狀態(tài)和用戶權(quán)限共同校驗(yàn)是否顯示，將權(quán)限校驗(yàn)和v-if共同作用在同一div中，下方為實(shí)例代碼
<div v-if="status==0">
<div @click="function1">
某按鈕功能
</div>
</div>
<div v-if="status==1" v-permission="['admin']">
<div @click="function2">
某按鈕功能
</div>
</div>在進(jìn)行直接查詢時(shí)無異常，沒有顯示功能按鈕；但在查詢狀態(tài) status == 0 為真后，再次查詢status==1 則進(jìn)行報(bào)錯(cuò)，并且在沒有權(quán)限的情況下，顯示功能按鈕。
這里作出猜想，因?yàn)樵趘-if判斷status==0 的時(shí)候，進(jìn)行了 是否status==1 等于1的判斷；而再次查詢后，status的值刷新為1時(shí)，在v-if判斷是否 status==0 后，則直接進(jìn)行了 是否status==1的判斷，而status確實(shí)為1，則直接顯示在頁面，而后續(xù)權(quán)限才判斷，告訴vue：你這不對啊，他沒這個(gè)權(quán)限，不應(yīng)該顯示，然后以及渲染出來的節(jié)點(diǎn)不能直接刪除，報(bào)了錯(cuò)。
解決方法
將v-permission作為首要判斷條件，將v-if作用在按鈕級別，即
<div v-if="status==0">
<div @click="function1">
某按鈕功能
</div>
</div>
<div v-permission="['admin']">
<div v-if="status==1" @click="function2">
某按鈕功能
</div>
</div>有明白原理的朋友可以和我說明
到此這篇關(guān)于vue中v-if 和v-permission 共同使用的坑及解決方案的文章就介紹到這了,更多相關(guān)vue中v-if 和v-permission 共同使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要介紹了詳解vuex的簡單todolist例子,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)
這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
vue項(xiàng)目中echarts自適應(yīng)問題的高級解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中echarts自適應(yīng)問題的高級解決過程,需要的朋友可以參考下2023-05-05
vue3+vite實(shí)現(xiàn)版本更新檢查的示例代碼
本文描述了一個(gè)Vue3和Vite項(xiàng)目中實(shí)現(xiàn)版本更新檢查的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
element 結(jié)合vue 在表單驗(yàn)證時(shí)有值卻提示錯(cuò)誤的解決辦法
這篇文章主要介紹了element 結(jié)合vue 在表單驗(yàn)證下，有值卻提示錯(cuò)誤的解決辦法,需要的朋友可以參考下2018-01-01
Vue中h函數(shù)和render函數(shù)的區(qū)別淺析
這篇文章主要介紹了Vue中h函數(shù)和render函數(shù)的區(qū)別的相關(guān)資料,h函數(shù)是工具,負(fù)責(zé)創(chuàng)建節(jié)點(diǎn), render函數(shù)是過程,負(fù)責(zé)組織節(jié)點(diǎn)并生成最終的虛擬DOM,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
今天小編就為大家分享一篇axios對請求各種異常情況處理的封裝方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點(diǎn)擊響應(yīng))
為了提高頁面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實(shí)現(xiàn)頁面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02