The pit and solutions for the use of v-if and v-permission in vue

background

A function button in the background system requires the order status and user permissions to be displayed. The permission checksum v-if is used together in the same div. The example code is below.

<div v-if="status==0">
    <div @click="function1">
A button function
</div>
</div>
<div v-if="status==1" v-permission="['admin']">
    <div @click="function2">
A button function
</div>
</div>

There is no exception when performing direct query, and no function button is displayed; but after query status == 0 is true, query status==1 again to report an error, and if there is no permission, the function button is displayed.

A guess is made here, because when v-if determines status==0, it is judged whether status==1 is equal to 1; and after querying again, when the value of status is refreshed to 1, after v-if determines status==0, it is directly judged whether status==1, and status==1 is indeed 1, it is displayed directly on the page, and then the subsequent permissions are judged, telling vue: This is wrong, it does not have this permission, it should not be displayed, and the rendered node cannot be deleted directly, and an error is reported.

Solution

Use v-permission as the primary judgment condition, and use v-if at the button level, that is,

<div v-if="status==0">
    <div @click="function1">
A button function
</div>
</div>
<div  v-permission="['admin']">
    <div v-if="status==1" @click="function2">
A button function
</div>
</div>

Friends who understand the principle can explain it to me

This is the article about the pitfalls and solutions of v-if and v-permission in vue. This is the end. For more related contents of v-if and v-permission in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!