Vue · Junior · Question 24 of 75

Why shouldn't `v-if` and `v-for` be used on the same element?

✓Correct answer: v-if is evaluated first in Vue 3, so it can't access the loop variable - filter with a computed list or wrap in <template>
2It throws a compile error in all cases
3It causes the list to render twice

Explanation

To show only some items, use a computed property like activeTodos. To hide the whole list, put v-if on a wrapper element or <template>.

Further reading

Test yourself

Take the Vue · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.