javascript - Prop 数据未显示在子组件 Vue.JS 上

Question

我将一个对象数组作为 Prop 从父组件传递给子组件。这工作得很好。

当我执行{{ QuestionList }}时，它会显示我的全部数据，因此正在接收props。

当我尝试将子组件中的数据输出为 {{ QuestionList[0].question }} 时，这也可以正常工作。但它只向我展示了第一个问题。

但是当我尝试将数据输出为{{ QuestionList.question }}，没有显示任何内容。

那么我怎样才能输出我所有的问题呢？

请查看下面我的代码。

父组件 - QuestionForm

<template>
<div class="form" >
    <questions v-for="question in questionList" vbind:key="question.question" v-bind:questionList="questionList" />
</div>
</template>

<script>

import questionList from '../questions/questionList.js'
import questions from '../components/questions'

export default {
  name: 'questionForm',

  components: {
    questions
  },

  data () {
   console.log(questionList)
   return {
     questionList
   }
  }
}

子组件 - 问题

<template>
<div class="questions">
  <p> {{ questionList.question }} </p>
</div>
</template>

<script>

export default {
  name: 'questions',
  props: ['questionList'],

  data () {
    return {

    }
  }
}

导入的数据 - QuestionList.js(数据要大得多，但出于可读性目的我减少了它)

export default [
{
  question: 'Sex',
  id: 0,
  options: [
    {label: 'Woman', value: 2},
    {label: 'Male', value: 1}
   ]
},
{
  question: 'Age',
  id: 1,
  options: [
    {label: '8-12', value: 1},
    {label: '12-14', value: 2},
    {label: '14-16', value: 2}
  ]
}]

Answer 1

您正在传递整个问题列表，而您应该像这样在子组件中传递单个问题对象

<template>
  <div class="form" >
    <questions v-for="question in questionList" v-bind:key="question.question" v- bind:object="question" />
  </div>
</template>

<script>

import questionList from '../questions/questionList.js'
import questions from '../components/questions'

export default {
  name: 'questionForm',

  components: {
    questions
  },

  data () {
    console.log(questionList)
    return {
      questionList
    }
 }
}

其中question这里v-bind:object="question"是循环中的对象

然后就可以在子组件的props中使用它了

<template>
  <div class="questions">
    <p> {{ object.question }} </p>
  </div>
</template>

<script>

export default {
  name: 'questions',
  props: ['object'],

  data () {
    return {}
  }
}