Как заполнить значения db и показать в vuejs vue - PullRequest
Новая
       39

Как заполнить значения db и показать в vuejs vue

0 голосов
/ 07 августа 2020

Я использую vuejs с laravel, и я создал событие по щелчку, и это событие переместит меня к новому компоненту

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

Это компонент подробного представления, когда я нажимаю на отдельные случаи, он перемещает меня сюда:

case-log. vue

<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: 300px; 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>

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

маршрутов. js

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

и это мои маршруты (веб, php), где я определил маршрут для получения db values ​​

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

Это мой 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')
            },
}

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

Где я делаю не так? почему я не могу заполнить эти значения db? Мы будем благодарны за вашу помощь.

...