0

Я учу 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

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

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

1 ответ 1

0

Осмелюсь предположить, что на момент рендеринга компонента, 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>

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

1
  • Спасибо большое за ответ, это очень помогло! 12 апр 2020 в 17:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.