数据显示在控制台中，但不显示在 Vue 中

Question

我有两个表Session（父）和Period（子）具有一对多关系。我现在正在尝试显示所有带有句点的会话。

它工作正常，但我的数据只显示在控制台中，而不是在 Vue 中。

public function allWithPeriods()
{
    $sessions = Session::orderBy('end_date', 'desc')
        ->with('_periods')
        ->get();

    return response()->json(['sessions' => $sessions]);
}

Session模特

public function periods()
{
    return $this->hasMany('App\Period')->with(["course_plans"]);
}

public function _periods()
{
    return $this->hasMany('App\Period');
}

Period模特

class Period extends Model
{
    public function session()
    {
        return $this->belongsTo('App\Session');
    }
}

Blade

<template>
    <div class="container">
        <h2 class="text-center p-2 text-white bg-primary mt-5">La liste des Sessions Universitaires</h2>
        <v-simple-table>
            <template v-slot:default>
                <thead>
                    <tr>
                        <th class="text-left">#</th>
                        <th class="text-left">Titre de la session</th>
                        <th class="text-left">Type</th>
                        <th class="text-left">Date de début de session</th>
                        <th class="text-left">Date de cloture de session</th>
                        <th class="text-left">Actions</th>
                    </tr>
                </thead>
                <tbody v-for="session in sessions.data" :key="session.id">
                    <tr>
                        <td>
                            <p class="font-weight-medium">{{session.id}}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{session.name}}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{session.type }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{session.start_date}}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{session.end_date}}</p>
                        </td>
                        <td>
                            <v-btn color="success" fab x-small dark :to="{ name:'/get_session', params:{ id: session.id } }">
                                <v-icon>mdi-pencil</v-icon>
                            </v-btn>
                            <v-btn color="red" fab x-small dark @click.prevent="deleteSession(session.id)">
                                <v-icon>mdi-delete</v-icon>
                            </v-btn>
                        </td>
                    </tr>
              </tbody>
            </template>
        </v-simple-table>
        <pagination :data="sessions" @pagination-change-page="getResults"></pagination>
        <v-btn
            depressed
            color="success"
            to="/add_session"
        >
            <v-icon left>mdi-plus</v-icon>
            Ajouter
        </v-btn>
    </div>
</template>

<script>
export default {
    name:'sessions',
    data() {
        return {
            url: document.head.querySelector('meta[name="url"]').content,
            sessions: {},
        }
    },
    created() {
        this.loadData();
    },
    mounted() {
        console.log('session component mounted ');
    },
    methods: {
        loadData() {
            let url = this.url + '/api/session/get';

            axios.get(url)
                .then(response => {
                    this.sessions = response.data;
                    console.log(this.sessions);
                }).catch(error => {
                    console.log(error)
                });
        },
        getResults(page = 1) {
            axios.get('http://localhost:8000/api/session/get?page=' + page)
                .then(response => {
                    this.sessions = response.data;
                });
        },
        deleteSession(id) {
            let url = this.url + `/api/session/delete_session/${id}`;

            this.axios.delete(url)
                .then(response => {
                    if (response.status) {
                        this.$utils.showSuccess('success', response.message);
                        this.loadData();
                    } else {
                        this.$utils.showError('Error', response.message);
                    }
                });
        }
    },
}
</script>

Answer 1

首先，您应该将会话数据定义为数组，而不是对象。否则，您可能会面临一些反应性问题。 所以不要这样：

data() {
    return {
        url: document.head.querySelector('meta[name="url"]').content,
        sessions:{}               
    }
},

您应该将您的sessions 声明为：

data() {
    return {
        url: document.head.querySelector('meta[name="url"]').content,
        sessions:[]               
    }
},

另一方面，您正在迭代 sessions.data 而不是 sessions。如果您查看您的开发者控制台，您可能会注意到sessions 中没有.data。 说应该这样迭代

<tbody v-for="session in sessions" :key="session.id">
...
</tbody>