Laravel Vue 使用 v-for 指令从数据库表结果显示不正确

问题描述

我在使用 laravel 和 vue 时遇到了关于显示数据库表 find 方法的结果的问题。我不太明白为什么 v-for 指令会错误地解析 json 结果。

这是Vue代码：

<template>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>Class</th>
            <th>Amount of Students</th>
            <th>Teacher</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="classroom in classrooms" :key="classroom.id">
            <td>{{ classroom.class_no }}&bull;{{ classroom.field }}&bull;{{ classroom.room_no }}</td>
            <td>{{ classroom.amount_students }}</td>
            <td>{{ classroom.teacher }}</td>
            <td>
                <a href="#">
                    <i class="fa fa-edit blue"></i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    data () {
        return {
            classrooms : {
                "success": true,"data": { "id": 1,"class_no": 1,"field": "Architecture","room_no": 4,"amount_students": 40,"teacher": "Bobby Fisher" },"message": "Find Classroom Detail"
            }
        }
    }
}
</script>

json 教室本身实际上是控制器的结果：

    public function show($level)
    {
        $classrooms = ClassRoom::where('class_no',$level)->firstOrFail();

        return $this->sendResponse($classrooms,'Find Classroom Detail');
    }

这是错误结果的截图：

The result should be only a single row

请帮我解决这个问题。

解决方法

查看您的 Vue 数据属性，您想使用 v-for="classroom in classrooms.data"。 如果您从 API 获取数据，那么您不想将完整响应分配给您的 classroom 数据属性，而是将 response.data 分配给 classroom，因此您可以这样做

v-for="classroom in classrooms"。

除非您的 API 以不同格式返回数据，否则这将有效。

,

实际上，当您迭代教室是一个具有三个键的对象时，for 循环对每个键迭代一次。

如果您只想遍历 data 键，那么只需从后端返回数据即可。

您可以使用 v-if 条件来检查当前键是否包含 class_no，如果是，则显示该行，否则不显示。

<tr v-for="classroom in classrooms" :key="classroom.id" v-if="classroom.class_no">
    <td>{{ classroom.class_no }}&bull;{{ classroom.field }}&bull;{{ classroom.room_no }}</td>
    <td>{{ classroom.amount_students }}</td>
    <td>{{ classroom.teacher }}</td>
    <td>
        <a href="#">
            <i class="fa fa-edit blue"></i>
        </a>
    </td>
</tr>

,

您可以查看 JsFiddle

https://jsfiddle.net/JManish/9qjvdy8n/2/

对教室的数据属性进行一些更改。

<table class="table">
    <thead>
      <tr>
        <th>Class</th>
        <th>Amount of Students</th>
        <th>Teacher</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(classroom,index) in classrooms.data" :key="index">
        <td>{{ classroom.class_no }}&bull;{{ classroom.field }}&bull;{{ classroom.room_no }}</td>
        <td>{{ classroom.amount_students }}</td>
        <td>{{ classroom.teacher }}</td>
        <td>
          <a href="#">
            <i class="fa fa-edit blue"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>

new Vue({
  el: '#app',data() {
    return {
            classrooms: {
                "success": true,"data":[ 
                  { 
                    "id": 1,"class_no": 1,"field": "Architecture","room_no": 4,"amount_students": 40,"teacher": "Bobby Fisher" 
                  }
                ],"message": "Find Classroom Detail"
            }
    }
  }
})

希望这能解决您的解析问题。