vue中v-if?和v-permission?共同使用的坑及解決方案

更新時間：2023年07月19日 08:34:43 作者：piaohd

這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下

背景

后臺系統(tǒng)某功能按鈕需要訂單狀態(tài)和用戶權(quán)限共同校驗是否顯示，將權(quán)限校驗和v-if共同作用在同一div中，下方為實例代碼

<div v-if="status==0">
    <div @click="function1">
　　　　某按鈕功能
　　</div>
</div>
<div v-if="status==1" v-permission="['admin']">
    <div @click="function2">
　　　　某按鈕功能
　　</div>
</div>

在進行直接查詢時無異常，沒有顯示功能按鈕；但在查詢狀態(tài) status == 0 為真后，再次查詢status==1 則進行報錯，并且在沒有權(quán)限的情況下，顯示功能按鈕。

這里作出猜想，因為在v-if判斷status==0 的時候，進行了是否status==1 等于1的判斷；而再次查詢后，status的值刷新為1時，在v-if判斷是否 status==0 后，則直接進行了是否status==1的判斷，而status確實為1，則直接顯示在頁面，而后續(xù)權(quán)限才判斷，告訴vue：你這不對啊，他沒這個權(quán)限，不應該顯示，然后以及渲染出來的節(jié)點不能直接刪除，報了錯。

解決方法

將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簡單實現(xiàn)原理詳解
這篇文章主要介紹了Vue簡單實現(xiàn)原理,結(jié)合實例形式詳細分析了Vue實現(xiàn)原理與操作注意事項,需要的朋友可以參考下
2020-05-05
vue項目部署跨域問題的詳細解決過程
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
詳解如何在vue中使用sass
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Vue實現(xiàn)簡易記事本
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易記事本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
尤大大新活petite-vue的實現(xiàn)
打開尤大大的GitHub，發(fā)現(xiàn)多了個叫 petite-vue 的東西,Vue3 和 Vite 還沒學完呢，又開始整新東西了？本文就來介紹一下
2021-07-07
前端實現(xiàn)Vue組件頁面跳轉(zhuǎn)的多種方式小結(jié)
這篇文章主要為大家詳細介紹了前端實現(xiàn)Vue組件頁面跳轉(zhuǎn)的多種方式,文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下
2024-02-02
vue利用better-scroll實現(xiàn)輪播圖與頁面滾動詳解
在我們?nèi)粘５捻椖块_發(fā)中，處理滾動和輪播圖是再常見不過的需求了，下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實現(xiàn)輪播圖與頁面滾動的相關(guān)資料，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。
2017-10-10
vue3 vite配置跨域及不生效問題解決
這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下
2023-07-07
一文探索Vue中組件和插件使用細節(jié)與差異
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務于不同的目的,但都極大地豐富了Vue的功能性和可擴展性,下面我們就來看看二者的用法以及區(qū)別吧
2024-03-03