从子组件创建一个 aswers 数组，然后在 Vue.js 2 中将此数组发送给父组件

Question

我正在使用 Vue 2 构建调查，我正在尝试构建答案数组并将其发送到名为 Evaluation 的父组件，如下所示：https://pastebin.com/rLEUh56a

我有一个名为 QuestionItem.vue 的组件，它是 Evaluation 的子组件，如下所示：https://pastebin.com/RFPgKs5Q

answers 数组需要像这样才能发送到 API:

answers: [
  {
    questionId: "6a9ad778-aacf-4e60-9610-37a767700b9f",
    questionOptionIds:[
      "1bc35f6c-900a-4764-84ee-23531e46e638",
    ],
    answer: null
  },
  {
    questionId: "d1c3f4f0-9525-4e6e-bb81-599d84b5cb02f",
    questionOptionIds:[],
    answer: "answered value"
  },
]

如果 question.type 是 text、range、stars 或 faces，则 questionOptionIds 需要为空并且 answer 属性需要是回答的值，但是如果 question.type 是 radio 或 check，则回答属性需要是空的，并且questionOptionIds 属性需要是用户选择的回答选项。

我不确定如何根据在 QuestionItem.vue 组件中输入的每个答案构建此数组。

谢谢你的时间，祝你有愉快的一天！

Answer 1

您不能像这样在您的 QuestionItem 组件上使用 v-model 作为答案：

<QuestionItem 
                                v-for="(question, index) in questions"
                                :key="index"
                                :question="question"
                                :index="questionIndex"
                                v-model="answers"
                                class="flex-none w-full"
                            />

v-model 将获取从 child 发出的输入值并将其设置为答案，这在这种情况下没有任何意义，因为答案是每个答案的数组，而不是单一答案。

您将需要在 parent 组件中有一个自定义事件处理程序。像这样：

// in Evaluation.vue methods
answerChanged(answer) {
    // remove this answer if it's already in the array
    answers = answers.filter(a=>a.questionId != answer.questionId);
    // add the submitted answer
    answers.push(answer);
}

然后使用事件处理程序代替 v-model：

 <QuestionItem 
                                v-for="(question, index) in questions"
                                :key="index"
                                :question="question"
                                :index="questionIndex"
                                @input="answerChanged" //bind the event handler
                                class="flex-none w-full"
                            />

最后，您需要将 questionId 添加到您发出的值中。这是一个近似值，您可能需要对其进行调整以适合您正在寻找的确切格式：

 watch: {
    questionValue(newValue) {
        // emit the value that we want for a single answer in our parent answers array
        this.$emit('input', {
           questionId: question.id,
           questionOptionIds:question.options,
           answer: newValue
        })
    },
},

从子组件创建一个 aswers 数组，然后在 Vue.js 2 中将此数组发送给父组件

Create an aswers array from a child component then emit this array to the parent in Vue.js 2

javascript

arrays

vue.js

object

emit