как вывести содержимое объекта в этом компоненте?

Question

мне приходит такой ответ с сервера

так я делаю запрос на получение данных в компоненте:

computed: {
  ...mapGetters([
    'showNews'
  ]),

  },
  mounted() {
     this.$store.dispatch('newsById', this.id /* в компонент передается props id */);
  }

так выглядит newsById в action в store/index.js:

newsById({ commit }, id) {
  axios.get(`/news/${id}`, apiConfig)
    .then(response => {
      console.log(response);
        commit('newsByIdMutation', response);
    })
}

так выглядит newsByIdMutation в mutations в store/index.js:

newsByIdMutation(state, newsById) {
  state.showNews = newsById.data;
}

в разметке компонента я пытаюсь получить доступ к этому объекту таким образом {{ showNews.title }}, {{ showNews.text }} и прочее. но получаю ошибку: Uncaught (in promise) TypeError: Cannot read property 'title_img' of undefined . как мне получить эти свойства в объекте который я получаю?

Answer 1

Vue полагается на данные. Рендеринг всегда синхронный. Компонент не ждет завершения каких-либо вызовов axios, прежде чем он попытается отобразить шаблон.

Вот типичная ситуация - как возникает ошибка подобная той, что в вопросе:

new Vue({
  el: '#app',
  data: {
    obj: undefined
  },
  mounted(){
    this.$nextTick(() => {
      this.obj = {
        title: 'Title'
      }
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  {{ obj.title }}
</div>

Несмотря на то, что в данном примере title успешно вмонтировано в шаблон (благодаря реактивности), на стадии рендеринга мы получили ошибку, которая уведомила нас о том, что шаблон использует данные, которые не определены ( потому что на стадии рендеринга vue получает obj как undefined и не найдя объявленного в шаблоне свойства title - выводит ошибку).

Чтобы не допустить возникновения такого рода ошибок, вы должны использовать директиву v-if (условная отрисовка) (в шаблоне компонента или в самом компоненте, в родительском шаблоне) для обработки ситуации, когда компонент уже отображается, но данных еще нет.

Перепишем пример, чтобы исключить возникновение ошибки:

new Vue({
  el: '#app',
  data: {
    obj: undefined
  },
  mounted() {
    this.$nextTick(() => {
      this.obj = {
        title: 'Title'
      }
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <template v-if="obj">
    {{ obj.title }}
  </template>
</div>

БЛОГ НА HUSL

как вывести содержимое объекта в этом компоненте?

Ответы (1 шт):