Question

我正在将一组对象作为道具从父级传递到子级组件。效果很好。

当我执行UPDATE a SET a.OrderType = 'Onnet_VOICE' FROM dbo.ABC a WHERE EXISTS ( SELECT 1 FROM dbo.XYZ x WHERE a.[Key] = x.[Key] AND x.RowCode IN ('VOICE', 'VOIP') );时，它会向我显示我的全部数据，因此{{ questionList }}被接收。

当我尝试将子组件中的数据输出为props时，这也可以正常工作。但这只向我显示了第一个问题。

但是当我尝试将数据输出为 {{ questionList[0].question }}，什么也没显示。

那么我该如何提出所有问题？

请在下面查看我的代码。

父组件-QuestionForm

{{ questionList.question }}

子组件-问题

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

导入的数据-questionList.js（数据更大，但出于可读性考虑，我将其减少了）

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

<script>

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

  data () {
    return {

    }
  }
}

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"是循环中的对象

然后您可以在道具的子组件中使用它

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

<script>

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

  data () {
    return {}
  }
}

Answer 2

您使用以下命令将整个列表绑定到每个问题孩子：

v-bind:questionList="questionList"

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

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

然后在子级中，您应该可以访问该问题的属性（确保将子级组件中的prop名称更改为question）：

{{question.question}}

Answer 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'],

  }
}

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

3 个答案: