#javascript #vue.js #axios #render
#язык JavaScript #vue.js #аксиос #оказывать
Вопрос:
Я получаю сообщение об ошибке при загрузке своего веб-сайта. 
Мой код выглядит так:
lt;div v-if="bookings"gt; lt;div class="row"gt; lt;div class="col-12 m-2" v-for="booking in bookings" :key="booking.booking_id" gt; lt;BookingListItem :booking="booking" /gt; lt;/divgt; lt;/divgt; lt;/divgt; ...... data() { return { boookings: undefined, }; }, computed: { ...mapState({ user: (state) =gt; state.patient, }), }, methods: { getBookings() { this.id = this.user.id; console.log(this.id); return axios .get('URL/patients/${this.id}/bookings') .then((response) =gt; { this.bookings = response.data; }) .catch((error) =gt; { console.log("Ein Fehler ist aufgetreten: " error.response); }); }, }, created() { this.getBookings(); }, }; Я определил отображаемые данные и даже добавил v-if в свой шаблон. Где я могу ошибиться? Заранее благодарю вас!
Комментарии:
1. Я думаю, все, что тебе нужно сделать, это
bookings: []. Определите его как пустой массив вdata()2.Это
data() {return { boookings: undefined }; }может быть опечатка, потому что в функции данных имя массива-boookings, а в цикле v-for написание отличается.3.@Jatinder Да, вы правы. Внутри
data()есть 3oboookings. лол.4. @Jatinder какой провал..
5. @Erenn да, теперь так работает. Спасибо вам обоим!
Ответ №1:
Потому что вы определяете его как неопределенный в своем объекте данных.
Сделайте вызов axios внутри функции async created() и назначьте его этому.bookings, затем он должен исчезнуть.
используйте ожидание вместо обратных вызовов при бронировании, а затем сделайте это.
async created(){ this.bookings = await this.getBookings(); } Ответ №2:
После того, как я переименовал boookings в booking и определил его, как показано ниже, он отлично работал.
data() { return { bookings: [], }; },