Latest solution for v-for and v-if cannot be used in the same tag in vue

v-if and v-for cannot be used at the same time in the same tag in the vue project

Problem description

In fact, this problem will not affect the operation of the vue project, but it will display a problem of reporting the popularity on the compilation software. It is easy to be misled when reporting the popularity in other places and is not beautiful. Therefore, a reasonable solution is needed.

Here, I have tried to use the problem of inner and outer nesting, but this method does not meet my business needs and cannot meet the problem of judgment and rendering. Therefore, I have troubled me for a long time. I even checked the source code of vue and found some problems. In fact, in the end, my mind has not turned around.

Cause of the problem

Just like we can see nesting for loops if, but how can we nest for if? This is a priority issue, because for is higher priority than if , so in vue v-for is higher priority than v-if

Solution

Two solutions are described here:

The first solution:

First of all, the first is the way I ended my final project, because there is also a v-show in vue just right
It can meet the needs of my project and will not report an error, so generally, in this case, I
We can try using v-show to see if it meets our project needs.

The second solution:

We all know that there is a special empty tag template tag in vue, which can be used to use the template tag
The sign is used as a loop label, and the main label is filled in the label to loop.

The code is as follows:

<template v-for="(item, index) in list" >
        <div v-if="show" :key="index">
            {{item .name}}
        </div >
</template>

But this method does not meet my project requirements, so I am using the first method.