Я учу 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
При этом компонент попрежнему работает и показывает все данные.
Подскажите, чем может быть вызвана эта ошибка. Спасибо!