vue.js - 如何在 Laravel 框架中使用带有条件“Like Forelse”的 v-for 进行循环

Question

我只是想在laravel 框架刀片中使用类似于 forelse 的 Vue 做一些事情，这只是为了确认表是否有记录，如果没有，它允许我添加一个默认值，例如：

<tr>
    <td colspan="4">There's No Records Yet</td>
</tr>

我试过这个，但它给了我[vue/no-use-v-if-with-v-for]

<tr v-for="(category, index) in this.categories" :key="index" v-if="categories">
    <td>{{ category.id }}</td>
    <td>{{ category.name }}</td>
    <td style="width: 20%;">
        <img :src="`${$store.state.baseUrl}/storage/${category.image}`" style="width: 100%;" :alt="category.name">
    </td>
    <td>
        <button type="button" class="btn btn-danger" @click="deleteCategory(category)"><i class="fa fa-trash"></i></button>
        <a href="#" class="btn btn-primary"><i class="fa fa-edit"></i></a>
    </td>
</tr>
<tr v-else>
    <th colspan="4" class="text-center">There's No Reacoards Yet</th>
</tr>

有没有人可以解决这个问题，谢谢 - Muhammed Elfeqy

标签： vue.js

Answer 1

这是您想要使用不可见<template>元素的时候之一

例如

<template v-if="categories.length > 0">
  <tr v-for="category in categories" :key="category.id">
    <!-- and so on -->
  </tr>
</template>
<tr v-else>
  <td colspan="4">There's No Records Yet</td>
</tr>