Question

我在如何在 laravel vue js 中的 v-for 中实现条件渲染时遇到了问题基于 vue js 的文档，不建议将 v-for 和 v-if 放在一起。如果有人可以帮助我，那就太好了，在此先感谢您！

这是我知道格式不正确的流程

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <v-if =user.gender="Male" >
       <span>Male - {{ user.gender }}</span>    
       <v-else>
        <span>FeMale - {{ user.gender }}</span>               
    </td>
</tr>

脚本

<script>
export default {
    data() {
        return {
            users: [],
        }
    },  
    created() {
        this.getUsers();
    },
    mounted() {

    },
    methods: {
        getUsers() {
            axios.get(BASE_URL + "/users/listUsers").then(response => {
                this.users = response.data;
            });
        },
    },
}
</script>

Answer 1

您的 v-if 语法完全不正确。让我们先修复它。

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <span v-if="user.gender=='Male'">Male - {{ user.gender }}</span>    
       <span v-else>FeMale - {{ user.gender }}</span>               
    </td>
</tr>

如果不需要 <span>，我会使用这个：

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td v-if="user.gender=='Male'">Male - {{ user.gender }}</td>
    <td v-else>FeMale - {{ user.gender }</td>         
</tr>

其实还有更好的方法：

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>{{ user.gender=="Male" ? "Male" : "FeMale" }} - {{ user.gender }}</td>         
</tr>

v-for 和 v-if 不能在同一个标签中使用。在您的代码中并非如此。当需要 v-for 和 v-if 一起使用时，应该使用计算属性，返回根据条件过滤的数组/对象，然后注入到 v-for 中。

假设您需要这样的东西：

<tr v-for="user in users" :key="user.id" v-if="user.id > 10">...</tr>

在这种情况下，我们使用计算属性：

computed: {
  filteredUsers() {
    return this.users.filter(user => user.id > 10);
  }
}

并在模板中：

<tr v-for="user in filteredUsers" :key="user.id">...</tr>

Answer 2

我认为有一个误解。你不应该在 same 元素上使用 v-if 和 v-for，因为你使用它的方式很好。您可以看到示例 here。如果您根本不想使用 v-if，因为您没有渲染完全不同的元素，则可以在胡子中使用三元运算：

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <span>{{ user.gender === 'Male' ? `Male - ${user.gender}` : `Female - ${user.gender}` }}</span>                   
    </td>
</tr>

V-for中的Laravel vue js条件渲染

2 个答案: