背景
后臺(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>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-577870.html
在進(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：你這不對(duì)啊，他沒這個(gè)權(quán)限，不應(yīng)該顯示，然后以及渲染出來的節(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>
有明白原理的朋友可以和我說明文章來源：http://www.zghlxwxcb.cn/news/detail-577870.html
?
到了這里，關(guān)于vue v-if 和v-permission 共同使用的奇怪問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
