Vue3中如何结合v-for使用if条件仅展示progress为1的待办项

你可以通过以下两种常见方式实现需求，优先推荐第二种性能更好：

方法1：模板中使用v-if条件过滤 #

在外层套一层<template>标签承载v-for逻辑，在实际渲染的div上添加v-if判断即可，修改后的模板代码如下：

<template v-for="(todo,index) in state.todos" :key="index">
  <div v-if="todo.progress === 1" 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>
  </div>
</template>

方法2：计算属性提前过滤（推荐） #

该方式将过滤逻辑放到JS层处理，不用在模板渲染时逐次判断，性能更优，逻辑也更易维护。

第一步：修改JS代码引入computed并定义过滤方法 #

import axios from "axios";
import { defineComponent, reactive, computed } from 'vue' // 引入computed

export default defineComponent({
  setup() {
    const state=reactive({
      todos:[],
      todoText:"",
    });
    // 定义过滤后的待办列表计算属性
    const filteredTodos = computed(() => {
      return state.todos.filter(todo => todo.progress === 1)
    })
    function getTodos(){  
      axios.get('http://127.0.0.1:8000/api/todos')
      .then(response=>{
        state.todos=response.data;
      });
    } 
    getTodos();
    // 把计算属性return出去模板才能调用
    return {
      filteredTodos
    }
  }
})

第二步：修改模板循环过滤后的数组 #

直接循环过滤后的计算属性，不需要额外加v-if判断：

<div v-for="(todo,index) in filteredTodos" :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>
</div>

可选优化：后端提前过滤 #

如果你的业务场景里前端完全不需要用到progress为0的待办项，可以直接在Laravel的接口查询逻辑中加where('progress', 1)条件，直接返回符合要求的数据，减少不必要的数据传输，性能更好。

内容的提问来源于stack exchange，提问作者Fayakon