Question

我已经在自己的laravel项目中集成了Vuejs。目前，我的情况是，当我单击我的案例时，它会将我导航到详细信息页面，但是在详细信息页面上却没有显示我想要从数据库中获取的值。

我正在点击案件的Vue：

<div class="col-lg-6">
                        <div class="card">
                            <div class="card-body table-responsive p-0" style="height: 300px;">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Case Name</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick">
                                        <td>{{kase.name}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

和我的脚本：

 methods: {
           
            handleCaseClick() {
              this.$router.push(`/case-log/id`)
            },
}

我的详细信息页面Vue，当我单击案例时，它会指引我进入

<template>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"></h3>
            </div>
            <div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>User Id</th>
                        <th>Case Id</th>
                        <th>Message Title</th>
                        <th>Process Type</th>
                        <th>Description</th>
                        <th>Data Load</th>
                        <th>Message Code</th>
                        <th>Log Type</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="list in lists">
                        <td>{{list.id}}</td>
                        <td>{{list.user_id}}</td>
                        <td>{{list.case_id}}</td>
                        <td>{{list.message_title}}</td>
                        <td>{{list.process_type}}</td>
                        <td>{{list.description}}</td>
                        <td>{{list.data_load}}</td>
                        <td>{{list.msg_code}}</td>
                        <td>{{list.log_type}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

我的routes.js

        {
    path: '/case-log/:id',
    component: require('./views/detail-page').default
},

我的web.php 我从数据库中获取值的地方

         Route::get('/case-log/{id}', 'CaseLogController@index');

我的控制器：

class CaseLogController extends Controller
{
    public function index($id)
    {
        $case = kase::with('sockets')->find($id);
        return $case->sockets;
    }
}

我无法从我做错的地方显示数据库中的值？我还附上了显示内部服务器错误的输出的屏幕截图，您也可以看到该字段，但未从db获取值。

我真的需要您的帮助预先感谢。

       local.ERROR: Trying to get property 'sockets' of non-object {"userId":1,"exception":"[object] (ErrorException(code: 0): Trying to get property 'sockets' of non-object at C:\\xampp\\htdocs\\admin-lte\\app\\Http\\Controllers\\CaseLogController.php:14)
[stacktrace]

我的答复：

在此处使用api

     <template>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"></h3>
            </div>
            <div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>User Id</th>
                        <th>Case Id</th>
                        <th>Message Title</th>
                        <th>Process Type</th>
                        <th>Description</th>
                        <th>Data Load</th>
                        <th>Message Code</th>
                        <th>Log Type</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="list in lists">
                        <td>{{list.id}}</td>
                        <td>{{list.user_id}}</td>
                        <td>{{list.case_id}}</td>
                        <td>{{list.message_title}}</td>
                        <td>{{list.process_type}}</td>
                        <td>{{list.description}}</td>
                        <td>{{list.data_load}}</td>
                        <td>{{list.msg_code}}</td>
                        <td>{{list.log_type}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                lists: [],
            }
        },
        created() {
            const id = this.$route.params.id;
            axios.get(`/case-log/${id}`).then (response => this.lists = response.data)
        },
    }
</script>

如何使用Vuejs从数据库填充值

0 个答案: