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

Posted 2023-03-14

【中文标题】Laravel Vue 使用 v-for 指令从数据库表结果中显示不正确

【英文标题】：Laravel Vue displaying from database table result using v-for directive not correctly

【发布时间】：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="clas-s-room in clas-s-rooms" :key="clas-s-room.id">
            <td> clas-s-room.class_no &bull; clas-s-room.field &bull; clas-s-room.room_no </td>
            <td> clas-s-room.amount_students </td>
            <td> clas-s-room.teacher </td>
            <td>
                <a href="#">
                    <i class="fa fa-edit blue"></i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script>
export default 
    data () 
        return 
            clas-s-rooms : 
                "success": true,
                "data":  "id": 1, "class_no": 1, "field": "Architecture", "room_no": 4, "amount_students": 40, "teacher": "Bobby Fisher" ,
                "message": "Find Clas-s-room Detail"
            
        
    

</script>

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

    public function show($level)
    
        $clas-s-rooms = ClassRoom::where('class_no', $level)->firstOrFail();

        return $this->sendResponse($clas-s-rooms , 'Find Clas-s-room Detail');
    

这是错误结果的截图：

The result should be only a single row

请帮我解决这个问题。

【问题讨论】：

欢迎来到 SO .. 这是您的完整组件代码吗？

不，但这段代码只是我完整代码的一部分。这个问题是我会员 4 年后的第二个问题。大声笑

【参考方案1】：

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

v-for="clas-s-room in clas-s-rooms".

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

【讨论】：

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

【参考方案2】：

实际上，当您在遍历作为具有三个键的对象的教室时，因此 for 循环将遍历每个键一次。

如果您只想遍历 data 键，则只需从后端返回数据。

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

<tr v-for="clas-s-room in clas-s-rooms" :key="clas-s-room.id" v-if="clas-s-room.class_no">
    <td> clas-s-room.class_no &bull; clas-s-room.field &bull; clas-s-room.room_no </td>
    <td> clas-s-room.amount_students </td>
    <td> clas-s-room.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="(clas-s-room, index) in clas-s-rooms.data" :key="index">
        <td> clas-s-room.class_no &bull; clas-s-room.field &bull; clas-s-room.room_no </td>
        <td> clas-s-room.amount_students </td>
        <td> clas-s-room.teacher </td>
        <td>
          <a href="#">
            <i class="fa fa-edit blue"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>

new Vue(
  el: '#app',
  data() 
    return 
            clas-s-rooms: 
                "success": true,
                "data":[ 
                   
                    "id": 1, 
                    "class_no": 1, 
                    "field": "Architecture", 
                    "room_no": 4, 
                    "amount_students": 40, 
                    "teacher": "Bobby Fisher" 
                  
                ],
                "message": "Find Clas-s-room Detail"
            
    
  
)

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

【讨论】：

我无法更改数据教室，因为数据是来自控制器的 json 结果。它是一个 json，而不是一个 json 数组。这就是为什么我也提到了控制器。

@Salamun- 在您的控制器方法中进行一些更改，而不是 firstOrFail() 使用 get()，这样您将获得 clas-s-roms 列表