如何使用 v-model 更新数组元素对象的键？

Question

我正在创建一个表单，其问题是从 api 获取的，所以我想在不同的输入字段中获取答案以获得答案。为此，我创建了一个响应数组（length >=noOfQuestions）来保存响应，并用我想要存储答案的格式预填充数组。现在我正在使用v-model 来更新相应的键，例如Question1 update the response[0]、for question2 update response[1]，但是当我更新一个索引的响应时，其他索引也在更新。

查看演示 https://codesandbox.io/embed/vuetify-tutorial-forked-314r8?fontsize=14&hidenavigation=1&theme=dark（查看 AppFooter.vue）

谁能告诉我在这里做错了什么，或任何其他方法来做到这一点 使用 vue@2 和 vuetify

<template>
  <v-footer height="auto">
    <v-card flat tile class="indigo white--text text-xs-center">
      <v-flex v-for="(question, index) in questions" :key="index">
        <span class="subheading"> Q{{ index + 1 }}. {{ question.text }} </span>
        <v-text-field
          v-if="question.answerType === 'text'"
          v-model="response[index].answer"
          class="mt-2"
          placeholder="Enter Your Answer"
        ></v-text-field>
        <v-radio-group
          v-if="question.answerType === 'scq'"
          :column="false"
          v-model="response[index].answer"
        >
          <v-radio
            v-for="item in question.options"
            :key="item"
            :label="item"
            :value="item"
          ></v-radio>
        </v-radio-group>
        <v-flex d-flex v-if="question.answerType === 'mcq'">
          <v-checkbox
            v-for="(item, i) in question.options"
            v-model="response[index].answer"
            :key="i"
            :label="item"
            :value="item"
            multiple
          ></v-checkbox>
        </v-flex>
      </v-flex>
    </v-card>
  </v-footer>
</template>

<script>
const format = {
  answer: "",
  options: "",
};
export default {
  data: () => ({
    questions: [
      {
        text: "Question 1",
        answerType: "text",
        details: "Question 1 details",
      },
      {
        text: "Question 2",
        answerType: "scq",
        options: ["a", "b"],
        details: "Question 1 details",
      },
      {
        text: "Question 3",
        answerType: "mcq",
        options: ["aa", "bb"],
        details: "Question 1 details",
      },
    ],
    response: Array.from(Array(3), () => format),
  }),
  watch: {
    response: {
      handler: function () {
        console.log(this.response);
      },
      deep: true,
    },
  },
};
</script>

Answer 1

一种选择是使response 成为每个question 的一部分，而不是使用单独的数组。 format 的扩展为每个问题创建了一个新的响应对象：

data: () => ({
  questions: [
    {
      text: "Question 1",
      answerType: "text",
      details: "Question 1 details",
      response: { ...format },
    },
    {
      text: "Question 2",
      answerType: "scq",
      options: ["a", "b"],
      details: "Question 1 details",
      response: { ...format },
    },
    {
      text: "Question 3",
      answerType: "mcq",
      options: ["aa", "bb"],
      details: "Question 1 details",
      response: { ...format },
    },
  ],
}),

在 HTML 模板中，使用v-model = "question.response.answer"