Ошибка после перезагрузки компонента Vue

Question

Я учу VUE.JS и столкнулся с не понятной ошибкой. Вот в чем суть:

Получаю данные через axios с Гугл Таблицы и передаю их в state vuex

actions: {
    LOAD_NEWS ({ commit }) {
          axios
            .get('https://spreadsheets.google.com/feeds/list/URL/1/public/values?alt=json')
            .then(response => response.data.feed.entry)
            .then(news => {
            commit('SET_NEWS', news)
            })          
        }
},
mutations: {
    SET_NEWS(state, news) {
            state.news = news
        }
}

Вызов массива данных в компоненте:

    export default {
        name: 'News',
        computed: {
            ...mapGetters(['news'])
        },
        created() {
            this.$store.dispatch('LOAD_NEWS')
        }
    }

А затем в компоненте детального просмотра показываю нужный элемент массива по индексу:

<h1 class="news__title"> {{news[20].gsx$title.$t}} </h1>
<p class="news__announce"> {{news[20].gsx$announce.$t}} </p>

Код работает, на страницу выводит нужные данные и не показывает никаких ошибок, но если перезагрузить страницу, то в консоли выдаст ошибку

[Vue warn]: Error in render: "TypeError: Cannot read property 'gsx$title' of undefined"

TypeError: Cannot read property 'gsx$title' of undefined

При этом компонент попрежнему работает и показывает все данные.

Подскажите, чем может быть вызвана эта ошибка. Спасибо!

Answer 1

Осмелюсь предположить, что на момент рендеринга компонента, vue не находит свойства gsx$title в объекте news (потому что, на момент загрузки компонента скорее всего news === undefined или заданное вами по умолчанию, допустим news = [], а следовательно vue не находит у него свойства [20] и тем более [20].gsx$title), о чем и предупреждает вас ошибкой:

TypeError: Cannot read property 'gsx$title' of undefined

и чтобы избежать этого, вам следует использовать условную отрисовку, которая позволит вам отобразить ваш блок только в том случае, если выражение директивы возвращает значение, приводимое к true.

что-то вроде этого:

<div v-if="news && news.length > 0">
  <h1 class="news__title"> {{news[20].gsx$title.$t}} </h1>
  <p class="news__announce"> {{news[20].gsx$announce.$t}} </p>
</div>

Вы должны понять суть условной отрисовки, чтобы избежать большинства подобных ошибок в будущем

БЛОГ НА HUSL

Ошибка после перезагрузки компонента Vue

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