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

Question

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

请帮我解决这个问题。

Answer 1

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

v-for="classroom in classrooms".

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

Answer 2

实际上，当您在 classrooms 上迭代时，这是一个具有三个键的对象，因此 for 循环会在每个键上迭代一次。

如果您只想遍历 data 键，那么只需 return 来自后端的数据。

您可以使用 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>

Answer 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"
            }
    }
  }
})

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

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

Laravel Vue displaying from database table result using v-for directive not correctly

json

controller

laravel

vue.js

v-for