数据没有显示在 vue 页面上

Question

我一直在努力制作一个简单的 vue js 和 laravel 数据显示网页，它旨在显示 table 中的所有数据，但我没有这么幸运. 当我进入 /api 目录时，我能够看到所有 json 数据，即使是我需要分页的不同页面，所有页码都在那里，但在网页中，数据本身是没有被显示。我不确定为什么，我已经用尽了我能找到的所有选项，但我相信 vue 组件是问题所在，但我不知道。所以，这里非常感谢任何帮助是代码： Home.blade.php:

@extends('layouts.app')
@section('content')
<div class="container" id="app">
<home-component></home-component>
</div>
@endsection

主页组件：

<template>
<div v-if="Object.keys(results).length">
<div class="container">
<div class="row">
<table border="2">
    <thead>
    <tr>
        <td scope="col">Status</td>
        <td scope="col">DDC_CODE</td>
        <td scope="col">TRADE_NAME</td>
        <td scope="col">SCIENTIFIC_CODE</td>
        <td scope="col">SCIENTIFIC_NAME</td>
        <td scope="col">INGREDIENT_STRENGTH</td>
        <td scope="col">DOSAGE_FORM_PACKAGE</td>
        <td scope="col">ROUTE_OF_ADMIN</td>
        <td scope="col">PACKAGE_PRICE</td>
        <td scope="col">GRANULAR_UNIT</td>
        <td scope="col">MANUFACTURER</td>
        <td scope="col">REGISTERED_OWNER</td>
        <td scope="col">UPDATED_DATE</td>
        <td scope="col">SOURCE</td>
    </tr>
    </thead>
    <tbody>
    <tr v-for="El in results.data" v-bind:key="El._id" >
    <td>{{ El.STATUS }}</td>
    <td>{{ El.DDC_CODE }}</td>
    <td>{{ El.TRADE_NAME }}</td>
    <td>{{ El.SCIENTIFIC_CODE }}</td>
    <td>{{ El.SCIENTIFIC_NAME }}</td>
    <td>{{ El.INGREDIENT_STRENGTH }}</td>
    <td>{{ El.DOSAGE_FORM_PACKAGE }}</td>
    <td>{{ El.ROUTE_OF_ADMIN }}</td>
    <td>{{ El.PACKAGE_PRICE }}</td>
    <td>{{ El.GRANULAR_UNIT }}</td>
    <td>{{ El.MANUFACTURER }}</td>
    <td>{{ El.REGISTERED_OWNER }}</td>
    <td>{{ El.UPDATED_DATE }}</td>
    <td>{{ El.SOURCE }}</td>
     
    </tr>
    </tbody>
</table>
</div>
</div>
<div class="row mt-4">
    <pagination :data="results" @pagination-change-page="getResults" />
</div>
</div>
</template>

<script>

export default{

 data() {
    return {
        results: {}
    };
},
methods:{
    getResults(page=1){
        axios.get('/api/home?page='+page)
       .then(response=>{this.results=response.data ,console.log(this.results)}) 
       .catch(error => console.log(error));
    }
},
mounted(){
    this.getResults();
},


}
 </script>

api 路线：

Route::middleware('api')->group(function () {
Route::get('/home', [PostController::class, 'home']);
});

网络路由：

Route::get('{any}', function () {return view('home');})->where('any', '.*');

后控制器

public function home() {
    $posts = Post::paginate(4);

    return response()->json($posts);
}

控制台记录响应时的输出：

Answer 1

你试过了吗response.data.data？

默认情况下，响应中有一个数据字段，直到您在提供程序中添加 WithoutWrapping。

无论如何，基于您的代码：

<script>
export default{
 data() {
    return {
        results: []
    };
},
methods:{
    getResults(page=1){
        axios.get('/api/home?page='+page)

       .then(response=>{
         this.results = response.data // Change this to response.data.data and try again
         console.log(this.results)
         // Console log the results no response to make sure what is happening here, 
         // or use Vue Dev Tools
})
       .catch(error => console.log(error));
    }
},
mounted(){
    this.getResults();
}
}
</script>

由于您可能未在提供程序中添加 WithoutWrapping，因此当您尝试 this.results=response.data 时，结果中可能会出现以下字段：

results : { 
 current_page : number,
 data: Array,
 first_page_url : string,
 // And more as you can see in picture you've attached.
}

如果您使用过this.results = response.data.data，则将v-for更新为results并注释Paginate component以逐步调试组件。

当您使用 Paginate 时，您的问题可能会发生，因为它获得了道具，因此在这种情况下，您应该根据要求更改传递给 Paginate 的数据。

在 other-hand 中，共享分页组件代码将有助于解决此问题。

当您使用 response.data.data 的结果完成调试 v-for 后，您可以通过再次更改 this.results = response.data 来修改发送给 Paginate 的值。

另一件事是，Paginate Component 可能无法灵活处理它获取的任何类型的数据，因此当您的组件准备就绪时，它可能会失败，因为您的 results 是一个空数组。

编辑 01：I get a prop : data type check failed. What can I do as I am using the laravel-vue-pagination library do I have to call it as a component?? I am not sure what to pass as data，

要回答这个问题，请按以下步骤操作，我认为您根据 laravel-vue-pagination 要求和未预料到的常见问题面临这些问题。

既然我们确定了这个问题的根源，

继续将结果更改为 this.results = response.data
将 data 对象中的 results 更改为 results = {}
像以前一样在 v-for 中再次传递 results.data。
现在再次在分页组件中传递 results。
这次你也可以给根元素添加一个v-if条件，它是div，以确保你不会再次出错，如果你不知道，你可以这样做：

<template>
<div v-if="Object.keys(results).length">
    // Table 
    // Paginate
</div>
</template>

您检查 results 的原因是：

您的 results.data 不存在，因为您使用空对象 (results : {}) 定义它，因此您的 v-for 可能会失败或给您警告。
我没有使用分页组件，但如果您没有考虑 null/empty object/etc 可能存在的问题。那么你应该这样做。在这种情况下，根据我们的条件，两种情况都会处理。

数据没有显示在 vue 页面上

Data is not being shown on the vue page

javascript

php

laravel

eloquent