Vue v-for with v-if

问题

I found some inconsistency in the Vue documentation. If someone clarify this please. Looking at v-for-with-v-if it says it could be useful to do it. Which in my case I am in that exact situation. But now eslint is complaining.

So I looked at the style guide and its telling me to avoid this. So there is some clear contradiction.

Question: Is it really that bad that you should avoid it?

My Opinion: I don't see it as bad. I have quite a few use cases where this is useful.

回答1:

Way 1:

all nodes will be rendered on every items[] change

<span v-for="item in items" v-if="item.shouldRender">...</span>

---

Way 2:

all nodes will be rendered once

<template v-for="item in items">
    <span v-if="item.shouldRender">...</span>
</template>

---

Way 3:

only filtered nodes will be rendered. Filtered list is cached.

<span v-for="item in computedShouldRenderItems">...</span>

---

I think that 'way-1' is not REALLY bad. But I prefer to avoid it.

来源：https://stackoverflow.com/questions/54531115/vue-v-for-with-v-if