Vue子组件Prop undefined问题：父传子对象内数组无法获取

嘿，我来帮你解决这个子组件拿不到answers的问题！

你遇到的问题本质上是Vue props的异步特性导致的——当子组件初始化data的时候，父组件传递的question可能还没完全传过来，或者父组件里的question本身是异步加载的（比如从接口取数据），这时候this.question是undefined，访问.answers自然就拿不到值啦。

下面给你几个靠谱的解决办法，按需选择：

方法1：用计算属性替代data（最推荐） #

计算属性会自动响应props的变化，完美适配这种依赖props的场景，代码还简洁：

Vue.component('single-question', {
  props: ['question'],
  computed: {
    answers() {
      // 可选链操作符+默认值，避免question未加载时报错
      return this.question?.answers || []
    }
  },
  template: `<div class="question mb-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ question.title }}</h5>
        <!-- 直接用计算属性的answers即可 -->
        <div v-for="answer in answers" :key="answer.id">{{ answer.content }}</div>
      </div>
    </div>
  </div>`
})

方法2：监听question变化动态更新answers #

如果一定要用data存储，可以通过watch监听question的变化，确保它有值时再赋值：

Vue.component('single-question', {
  props: ['question'],
  data() {
    return {
      answers: []
    }
  },
  watch: {
    question: {
      immediate: true, // 组件初始化时就执行一次监听逻辑
      handler(newQuestion) {
        this.answers = newQuestion?.answers || []
      }
    }
  },
  template: `<div class="question mb-3">
    <div class="card">
      <div class="card-body">
        <!-- 模板部分正常使用answers -->
      </div>
    </div>
  </div>`
})

方法3：父组件用v-if确保question存在后再渲染子组件 #

这样子组件初始化时，question已经有完整数据了，data里就能直接拿到answers：

<!-- 父组件模板 -->
<single-question 
  v-if="question && question.answers" 
  :question="question"
></single-question>

子组件代码可以保留你原来的结构，但建议加个兜底判断：

Vue.component('single-question', {
  props: ['question'],
  data() {
    return {
      answers: this.question?.answers || []
    }
  },
  template: `<div class="question mb-3">...</div>`
})

方法4：给question props设置默认值 #

给question设置一个默认的空对象，避免初始化时question为undefined：

Vue.component('single-question', {
  props: {
    question: {
      type: Object,
      // 注意：对象类型的默认值要返回一个函数，避免多个组件实例共享同一个对象
      default: () => ({ answers: [] })
    }
  },
  data() {
    return {
      answers: this.question.answers
    }
  },
  template: `<div class="question mb-3">...</div>`
})

内容的提问来源于stack exchange，提问作者Liam87