Question

渲染时出错：“TypeError：无法读取未定义的属性‘id’”

2021-03-15

724

javascript vue.js nuxt.js

我仅在尝试打印 questions 数组的第一个问题的 id 时收到此错误。（我获取了值，但控制台中也显示了此错误）

<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>

Answer 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>

Answer 2

之所以会抛出此错误，是因为您在 axios 完成要求之前就直接访问了插值中的索引 [0]，因此会抛出错误。

这不安全，而且肯定会导致错误。您可以做的是在插值中添加一些条件

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