将Axios数据发送到Vue中的数组后无法访问

Question

我正在尝试显示通过Axios请求获取的数据，当我在控制台中登录this.form时，它会显示数据，但是当我尝试使用{{ form.title }}输出标题时，则没有任何显示。在Vue开发工具中查找时，“表单”也不会填充。我想念什么？

我的代码：

<template>
    <div class="newitem">
        <h2>Bewerk {{ form.title }}</h2>

        <form @submit.prevent="formSubmit">
            <label for="name">Naam van de taak</label>
            <input type="text" name="name" id="name" v-model="form.title">

            <div class="date">
                <div class="date__item allday">
                    <label for="allDay">Hele dag</label>
                    <input type="checkbox" name="allDay" id="allDay" v-model="form.allDay">
               </div>

                <div class="date__item">
                    <label for="date">Datum wanneer je begint</label>
                    <input type="date" name="date" id="date" v-model="form.date">
                </div>

                <div v-if="!this.form.allDay" class="date__item">
                    <label for="from">Tijd wanneer je begint</label>
                    <input type="time" name="from" id="from" v-model="form.from">
                </div>

                <div v-if="!this.form.allDay" class="date__item">
                    <label for="till">Tijd wanneer je denkt klaar te zijn</label>
                    <input type="time" name="till" id="till" v-model="form.till">
                </div>

                <div class="date__item">
                    <label for="date">Datum wanneer denkt klaar te zijn</label>
                    <input type="date" name="date" id="date" v-model="form.date">
                </div>

            </div>

            <label for="type">Type</label>
            <select name="type" id="type" v-model="form.type">
                <option selected disabled>Kies een type</option>
                <option>SO</option>
                <option>Repetitie</option>
                <option>Leerwerk</option>
                <option>Maakwerk</option>
            </select>

            <label for="description">Wat ga je je maken/leren?</label>
            <textarea id="description" v-model="form.description"></textarea>

            <button class="button button-primary">Opslaan</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: [],
        }
    },
    created() {
        this.fetchPost();
    },
    methods: {
        fetchPost() {
            this.$eventBus.$on('send-data', (id) => {

                axios.get('/agenda_items/' + id).then(response => {
                    this.form = response.data;

                    console.log(this.form)
                })
                .catch(error => console.log(error))
            });

        },
    }
}
</script>

使用v-for编辑：

<template>
        <div class="newitem">
            <div class="newitem__inner" v-for="form in forms" :key="form.id">
                <h2>Bewerk {{ form.title }}</h2>

                <form @submit.prevent="formSubmit">
                    <label for="name">Naam van de taak</label>
                    <input type="text" name="name" id="name" v-model="form.title">

                    <div class="date">
                        <div class="date__item allday">
                            <label for="allDay">Hele dag</label>
                            <input type="checkbox" name="allDay" id="allDay" v-model="form.allDay">
                        </div>

                        <div class="date__item">
                            <label for="date">Datum wanneer je begint</label>
                            <input type="date" name="date" id="date" v-model="form.date">
                        </div>

                        <div v-if="!this.form.allDay" class="date__item">
                            <label for="from">Tijd wanneer je begint</label>
                            <input type="time" name="from" id="from" v-model="form.from">
                        </div>

                        <div v-if="!this.form.allDay" class="date__item">
                            <label for="till">Tijd wanneer je denkt klaar te zijn</label>
                            <input type="time" name="till" id="till" v-model="form.till">
                        </div>

                        <div class="date__item">
                            <label for="date">Datum wanneer denkt klaar te zijn</label>
                            <input type="date" name="date" id="date" v-model="form.date">
                        </div>

                    </div>

                    <label for="type">Type</label>
                    <select name="type" id="type" v-model="form.type">
                        <option selected disabled>Kies een type</option>
                        <option>SO</option>
                        <option>Repetitie</option>
                        <option>Leerwerk</option>
                        <option>Maakwerk</option>
                    </select>

                    <label for="description">Wat ga je je maken/leren?</label>
                    <textarea id="description" v-model="form.description"></textarea>

                    <button class="button button-primary">Opslaan</button>
                </form>
            </div>
        </div>
    </template>

    <script>
    export default {
        data() {
            return {
                forms: [],
            }
        },
        created() {
            this.fetchPost();
        },
        methods: {
            fetchPost() {
                this.$eventBus.$on('send-data', (id) => {
                    axios.get('/agenda_items/' + id).then(response => {
                        this.forms = response.data;

                        console.log(this.forms)
                    })
                    .catch(error => console.log(error))
                });

            },
        }
    }
</script>

Answer 1

似乎事件总线是问题所在。我将其删除，并获得了this.$attrs.id;

的ID

fetchPost() {
    var id = this.$attrs.id;

    axios.get('/agenda_items/' + id).then(response => {
        this.form = response.data[0];
    })
    .catch(error => console.log(error))
}