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

【问题标题】：Laravel Vue displaying from database table result using v-for directive not correctlyLaravel Vue 使用 v-for 指令从数据库表结果中显示不正确
【发布时间】：2021-05-14 21:44:28
【问题描述】：

我在 laravel 和 vue 关于显示数据库表查找方法的结果时遇到问题。我不太明白的是为什么 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

请帮我解决这个问题。

【问题讨论】：

欢迎来到 SO .. 这是您的完整组件代码吗？
不，但这段代码只是我完整代码的一部分。这个问题是我会员 4 年后的第二个问题。大声笑

标签： json laravel vue.js controller v-for

【解决方案1】：

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

v-for="classroom in classrooms".

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

【讨论】：

是的，我从 API 获得结果，我确实将教室变量和 v-for 语句更改为：和教室 : {} 和 API 函数将数据放入 this : this.classrooms = response.data 结果为空白。
我对有很多行的 API 结果没有任何问题，这个问题发生在单行结果中，并且 json 的格式与数组 json 不同。

【解决方案2】：

实际上，当您在遍历作为具有三个键的对象的教室时，因此 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>

【讨论】：

谢谢，这正在工作。但是 v-if 指令的位置在元素内：
嗨，很高兴知道它有效，但不建议根据 Vue2 文档将 v-if 和 v-for 放在同一标签上[vuejs.org/v2/guide/list.html#v-for-with-v-if]
谢谢，我已经阅读了文档，但就我而言，它与文档相符。

【解决方案3】：

你可以查看 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"
            }
    }
  }
})

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

【讨论】：

我无法更改数据教室，因为数据是来自控制器的 json 结果。它是一个 json，而不是一个 json 数组。这就是为什么我也提到了控制器。
@Salamun- 在您的控制器方法中进行一些更改，而不是 firstOrFail() 使用 get()，这样您将获得 classroms 列表