vue3 if condition with v-for loop-CodePudding

i am getting all data from my database to view using vue3 and laravel.

right now it's working fine, but i want to apply if condition with v-for.

for example: show todo only if (progress=1).

vue: this part is working fine to get everything from database

import axios from "axios";
import { defineComponent, reactive } from 'vue'



    export default defineComponent({
      setup() {
    
        const state=reactive({
          todos:[],
          todoText:"",
        });
    function getTodos(){  
       axios.get('http://127.0.0.1:8000/api/todos')
       .then(response=>{
         state.todos=response.data;
       });
     } 
     getTodos();
    }

HTML:

<div v-for="(todo,index) in state.todos" :key="index" class="   border-dashed bg-white  rounded-md shadow-md  ">
    <div class="justify-between flex ">
    <div  class="text-gray-600 p-4 font-medium "> {{todo.text}}
    <span class="text-gray-500 text-sm"> Small Details </span> 
    <span class="text-gray-500 text-sm"> Progress: {{todo.progress}} </span> 
    </div>
</div>

result: i don't want to show todo if progress=0, currently it is showing.

CodePudding user response：

You can use a template tag if you do not want to have a DOM element added to your code:

<div v-for="(todo,index) in state.todos" :key="index" class="border-dashed bg-white rounded-md shadow-md">
  <template v-if="todo.progress !== 0">
    <div class="justify-between flex" />
    <div class="text-gray-600 p-4 font-medium">{{todo.text}}
      <span class="text-gray-500 text-sm"> Small Details </span> 
      <span class="text-gray-500 text-sm"> Progress: {{todo.progress}} </span> 
    </div>
  </template>
</div>

Side note: you should check your closing tags, they aren't coherent in your current question.