UPD: Решил вопрос просто добавлением в проверку v-if сами данные. Все начало работать как надо, собственно почему так необходимо делать? Какой-то костыль.
Решение:
<div class="comments_items_title">{{card.comments && card.comments.length}} комментариев </div>
<div class="comments_items" v-if="card.comments && card.comments.length">
<Comment v-for="comment in card.comments"
:key="comment._id"
:comment="comment"
/>
</div>
<div v-else>Комментариев нет</div>
<CommentForm
:id="card && card._id"
@created="createCommentHandler"
/>
При переходе на динамическую страницу.
<template>
<div>
<component :is="res"/>
</div>
</template>
<script>
export default {
async asyncData({store, params}) {
const res = await store.dispatch('data/getData', params.slug)
return {res}
}
}
</script>
Мне отрисовывается компонент в зависимости от ответа.
Сам компонент
<template>
<div>
<h1 class="mb28">{{this.card.title}}</h1>
<footer class="comments">
<div class="comments_items_title">{{card.comments.length}} комментариев </div>
<div class="comments_items" v-if="card.comments && card.comments.length">
<Comment v-for="comment in card.comments"
:key="comment._id"
:comment="comment"
/>
</div>
<div v-else>Комментариев нет</div>
<CommentForm
:id="card._id"
@created="createCommentHandler"
/>
</footer>
</div>
</div>
</template>
<script>
export default {
data () {
return {
card: ''
}
},
async fetch() {
const res = await this.$store.dispatch('card/fetchById', this.$route.params.slug)
await this.$store.dispatch('card/addView', res)
this.card = res
},
methods: {
createCommentHandler(comment) {
this.card.comments.push(comment)
}
}
}
</script>
При переходе на динамическую страницу, рендерится компонент, где получает данные с сервера с помощью fetch.
После перехода у меня появляется ошибка -
Cannot read property 'length' of undefined. При обновлении страницы, все начинает работать. Но, если я перейду на главную и снова перейду на динамическую страницу, то возникает та же ошибка.
Но если я уберу компонент комментариев, где есть то самое свойство length, то все работает как надо.
Почему так происходит? Я же получаю данные как надо и они уже есть при переходе на страницу. В чем проблема?
Средний
