子组件 Vue.JS 上未显示道具数据答案

【问题标题】：Props data not showing on child component Vue.JS子组件 Vue.JS 上未显示道具数据
【发布时间】：2019-03-27 22:53:06
【问题描述】：

我将一个对象数组作为道具从父组件传递给子组件。这很好用。

当我执行{{ 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}
  ]
}]

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

【讨论】：

不错，也是一个不错的解决方案！

【解决方案2】：

您将整个列表绑定到每个问题孩子：

v-bind:questionList="questionList"

您似乎希望每个孩子都有一个问题，因为您在父母中使用v-for。如果是这种情况，只需为每个孩子绑定一个问题：

<questions v-for="question in questionList" vbind:key="question.id" v-bind:question="question" />

然后在孩子中你应该能够访问该问题的属性（确保将子组件中的道具名称更改为question）：

{{question.question}}

【讨论】：

很好的解释

【解决方案3】：

我稍微修改了代码，但是您要做的基本上是遍历问题列表，然后将每个问题作为子问题组件中的道具传递。

所以试试这个：D

在父组件内部

<template>
<div class="form" >
    <questions v-for="{question, index} in questionList" :key="index" :question="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
   }
  }
}

下一个在你的子组件中

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

<script>

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

  }
}

【讨论】：