Как заполнить значения из базы данных, используя Vuejs

Question

Я интегрировал Vuejs в свой laravel проект. В настоящее время мой сценарий заключается в том, что когда я нажимаю на свой случай, он перемещает меня на страницу сведений, но на странице сведений он не показывает мне значения, которые я хочу получить из базы данных.

My 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>

Мои маршруты. js

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

Мой Интернет. 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]

My response:

Consuming api here

     
        ID  Идентификатор пользователя  Идентификатор случая  Заголовок сообщения  Тип процесса  Описание  Загрузка данных  Код сообщения  Тип журнала     {{list.id}}  {{list.user_id}}  {{list.case_id}}  {{list.message_title}}  {{list.process_type}}  {{list.description}}  {{list.data_load}}  {{list.msg_code} }  {{list.log_type}}         экспорт по умолчанию {data () {return { списки: [],}}, created () {const id = this. $ route.params.id; ax ios .get (`/ case-log / $ {id}`) .then (response => this.lists = response.data)},}  

Answer 1

Касе должно быть заглавным. Я полагаю, вы вызываете метод модели. так что изменитесь на это.

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