我正在從我的資料庫中獲取所有資料以使用 vue3 和 laravel 查看。
現在它作業正常，但我想用 v-for 申請 if 條件。
例如：僅在 (progress=1) 時才顯示待辦事項。
vue：這部分作業正常，可以從資料庫中獲取所有內容
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>
結果：如果progress=0，我不想顯示todo，目前它正在顯示。
uj5u.com熱心網友回復：
如果您不想將 DOM 元素添加到您的代碼中，您可以使用模板標簽：
<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>
旁注：您應該檢查您的結束標簽，它們與您當前的問題不一致。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/361737.html
下一篇：Livewire發射到和重定向