使用 v-for 进行渲染答案

【问题标题】：using v-for for rendering使用 v-for 进行渲染
【发布时间】：2021-07-04 12:05:22
【问题描述】：

我正在构建一个 laravel vue 应用程序，我想从我的类别控制器呈现我的类别

这是我的类别控制器

public function index()
    {
        // geeting all the categories
        $categories = Category::all();
        return response([ 'categories' => CategoryResource::collection($categories), 'message' => 'Retrieved successfully'], 200);
    }

这是我的 category.vue 文件

<tbody>
                        <tr v-for="category in categories.data" :key="category.id">
                        <td>{{ category.id }}</td>
                        <td>{{ category.name }}</td>
                        <td>11-7-2014</td>
                        <td><span class="tag tag-success">Approved</span></td>
                        </tr>
                        
                    </tbody>

这也是我在 category.vue 文件中加载类别的方法

 loadCategory(){
                axios.get("api/category").then(({ data }) => (this.categories = data));
                
            },

现在我没有任何错误，但它也没有呈现我的类别。请需要帮助

【问题讨论】：

标签： vue.js laravel-7

【解决方案1】：

由于您要破坏回调参数 .then(({ data }) 内的响应，因此您应该直接渲染 categories 而无需 .data 字段：

<tr v-for="category in categories" :key="category.id">

【讨论】：

【解决方案2】：

当您使用 api 资源从 laravel 发送数据时，实际数据会加载到数据属性中。所以你应该在 axios 调用中像这样提取它

loadCategory(){
                axios.get("api/category").then(({ data }) => (this.categories = data.categories.data));
                
            },

【讨论】：

【解决方案3】：

是的，我只是想快速澄清一下，以防有人看到这个问题，@Boussadjra Brahim 和 @sazzad 的回答都很有帮助。所以我所做的是

首先我接受了@Boussadjra Brahim 的建议并改变了这个

 <tr v-for="category in categories" :key="category.id">
                        <td>{{ category.id }}</td>
                        <td>{{ category.name }}</td>
                        <td>11-7-2014</td>
                        <td><span class="tag tag-success">Approved</span></td>
 </tr>

然后我仍然遇到错误，直到我尝试了 @sazzad 建议但取出了 .data 属性给我这个

 loadCategory(){
                axios.get("api/category").then(({ data }) => (this.categories = data.categories));
                
            },

希望这对某人有所帮助，再次感谢

【讨论】：