vue中v-if?和v-permission?共同使用的坑及解決方案
背景
后臺(tái)系統(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í)無(wú)異常，沒(méi)有顯示功能按鈕；但在查詢狀態(tài) status == 0 為真后，再次查詢status==1 則進(jìn)行報(bào)錯(cuò)，并且在沒(méi)有權(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，則直接顯示在頁(yè)面，而后續(xù)權(quán)限才判斷，告訴vue：你這不對(duì)啊，他沒(méi)這個(gè)權(quán)限，不應(yīng)該顯示，然后以及渲染出來(lái)的節(jié)點(diǎn)不能直接刪除，報(bào)了錯(cuò)。
解決方法
將v-permission作為首要判斷條件，將v-if作用在按鈕級(jí)別，即
<div v-if="status==0">
<div @click="function1">
某按鈕功能
</div>
</div>
<div v-permission="['admin']">
<div v-if="status==1" @click="function2">
某按鈕功能
</div>
</div>有明白原理的朋友可以和我說(shuō)明
到此這篇關(guān)于vue中v-if 和v-permission 共同使用的坑及解決方案的文章就介紹到這了,更多相關(guān)vue中v-if 和v-permission 共同使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue簡(jiǎn)單實(shí)現(xiàn)原理,結(jié)合實(shí)例形式詳細(xì)分析了Vue實(shí)現(xiàn)原理與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
打開(kāi)尤大大的GitHub，發(fā)現(xiàn)多了個(gè)叫 petite-vue 的東西,Vue3 和 Vite 還沒(méi)學(xué)完呢，又開(kāi)始整新東西了？本文就來(lái)介紹一下2021-07-07
前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2024-02-02
vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)詳解
在我們?nèi)粘５捻?xiàng)目開(kāi)發(fā)中，處理滾動(dòng)和輪播圖是再常見(jiàn)不過(guò)的需求了，下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-10-10
這篇文章主要介紹了vue3 vite配置跨域以及不生效問(wèn)題,本文給大家分享完美解決方案，需要的朋友可以參考下2023-07-07
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴(kuò)展性,下面我們就來(lái)看看二者的用法以及區(qū)別吧2024-03-03