Vue v-if and v-for

1. Overview

In this article, we will learn to use v-if and v-for together in Vue js 3. To learn more about Vue, refer to these articles.

2. Precedence

There are scenarios where you want to use both these two most commonly used directives v-if�?and�?v-for in the same element.

In 2.x, when using�?v-if�?and�?v-for�?on the same element,�?v-for�?would take precedence. In 3.x,�?v-if�?will always have higher precedence than�?v-for.

The v-if condition can conditionally render an element or a template fragment based on the truthy-ness of the expression value.

3. Vue v-for directive

We can use the�?v-for�?directive to render a list of items based on an array. The�?v-for�?directive requires a special syntax as�?item in items, where�?items�?is the source data array and�?item�?is an�?alias�?for the array element being iterated on:

<script>
export default {
  data() {
  	return {
	    todos: {
                name: 'Send email',
      	        isComplete: true
    	    }
        }
   }
}
</script>
<template>
<li v-for="todo in todos">
    {{ todo.name }}
  </li>
</template>

4. v-for�?with�?v-if

While using v-for with v-if, the�?v-if�?condition will not have access to variables from the�?v-for scope:

<!--
This will throw an error because property "todo"
is not defined on instance.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

However, if you still want to access it within v-if, you can move�?v-for�?to a wrapping�?<template>�?tag (which is also more explicit):

template

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

4. Conclusion

To sum up, we have learned to use the v-if, v-for directives together.