背景

後臺系統某功能按鈕需要訂單狀態和用戶許可權共同校驗是否顯示，將許可權校驗和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>

在進行直接查詢時無異常，沒有顯示功能按鈕；但在查詢狀態 status == 0 為真後，再次查詢status==1 則進行報錯，並且在沒有許可權的情況下，顯示功能按鈕。

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

解決方法

將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>

有明白原理的朋友可以和我說明