Ошибка при визуализации: «Ошибка типа: Не удается прочитать свойство «идентификатор» неопределенного»

#javascript #vue.js #nuxt.js

Вопрос:

Я получаю эту ошибку только при попытке распечатать id первый вопрос questions массива. (Я получаю значение, также эта ошибка отображается в консоли )

 <p> {{ questions[0].id }} </p>
 

Но когда я пытаюсь зациклить вопросы,ошибки нет.

 <p v-for="i in questions" :key="i.id">
   {{ i.id }}
</p>
 

Раздел сценария шаблона

 <script>
export default {
  data() {
    return {
      questions: []
    }
  },
  mounted(){
    axios.get('/get_questions')
      .then((res) => {
        this.questions = res.data
      });
  }
}
</script>
 

Ответ №1:

Потому что, когда страница только что загружена, questions это пустой массив.

Когда вы пытаетесь зациклить пустой массив, тело цикла просто не запускается:

 for(let i of []) {
  // this part will not reach
}
 

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

 [][0].id  // can't read ".id" from undefined
 

Что вы можете сделать, так это убедиться questions , что в нем есть содержимое:

 <p v-if="questions.length > 0"> {{ questions[0].id }} </p>
 

Ответ №2:

Это происходит из-за того, что ваш индекс доступа [0] при вашей интерполяции из первых рук еще до того, как axios завершит выполнение, требует, следовательно, ошибки.

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

 {{ questions.length > 0 ? questions[0].id: '' }}