javascript - 将对象添加到对象数组 vuetify 模型

Question

我正在尝试将动态加载到对象数组中的单选按钮的值保存。这些收音机是一系列表格问题的选项，我想得到类似的东西：

[{"question1":{
   "selected": <id>,
   ...
},...]

但我不知道我应该如何定义数据或如何使用无线电组的 v-model 属性来引用它。

这是我最好的尝试：

<v-radio-group v-model="answers[question.question_id]">
  <v-row justify="center">
    <v-col v-for="option in question.options" :key="option.option_id">
      <v-radio
        :label="option.option_text"
        :name="question.question_id"
        :value="option.option_id"                      
      ></v-radio>
    </v-col>
  </v-row>
</v-radio-group>

和数据：

data: () => ({
    ...
    answers: [],
    ...
  }),

我从这得到的东西有点像：[anwswer_id1, anwswer_id1...]，女巫很近，但不完全是我需要的

标签： javascriptvue.jsvuetify.jsv-model

Answer 1

一个简单的方法可能是这样的：

<template>
  <v-layout column>
    <v-radio-group v-model="questions[questionIndex][currentQuestionId].selected">
    <v-row justify="center">
      <v-col v-for="(option,i) in questions[questionIndex][currentQuestionId].options" :key="i">
        <v-radio :label="option.text" :name="currentQuestionId" :value="option._id"></v-radio>
      </v-col>
    </v-row>
  </v-radio-group>
  <v-btn @click="handleClickButtonNext">next question</v-btn>
  <v-btn @click="handleClickButtonPrev">previous question</v-btn>
  </v-layout>
</template>
<script>
export default {
  data() {
    return {
      questions: [
        {
          question0: {
            selected: null,
            options: [
              {
                text: "text 1",
                _id: 1
              },
              {
                text: "text 2",
                _id: 2
              },
              {
                text: "text 3",
                _id: 3
              }
            ]
          }
        },
        {
          question1: {
            selected: null,
            options: [
              {
                text: "text 2",
                _id: 2
              },
              {
                text: "text 3",
                _id: 3
              },
              {
                text: "text 4",
                _id: 4
              }
            ]
          }
        },
      ],
      questionIndex: 0
    };
  },
  computed: {
    currentQuestionId() {
      return "question" + this.questionIndex;
    }
  },
  methods: {
    handleClickButtonNext() {
      if (this.questionIndex < this.questions.length-1) this.questionIndex++;
    },
    handleClickButtonPrev() {
      if (this.questionIndex > 0) this.questionIndex--;
    },
  }
};
</script>

其中： questionIndex- 跟踪当前问题索引 currentQuestionId- 为您提供当前问题 ID handleClickButtonNext / handleClickButtonPrev- 让您在问题之间跳转

如果您只想一次显示 1 个问题，这是一种方法。

否则，您也可以摆脱对索引的跟踪，并循环问题数组：

<template>
  <v-layout column>
    <v-radio-group
      v-for="(question, j) in questions"
      :key="j"
      v-model="question[`question${j}`].selected"
    >
      <v-row justify="center">
        <v-col v-for="(option,i) in question[`question${j}`].options" :key="i">
          <v-radio :label="option.text" :name="`question${j}`" :value="option._id"></v-radio>
        </v-col>
      </v-row>
    </v-radio-group>
  </v-layout>
</template>
<script>
export default {
  data() {
    return {
      questions: [
        {
          question0: {
            selected: null,
            options: [
              {
                text: "text 1",
                _id: 1
              },
              {
                text: "text 2",
                _id: 2
              },
              {
                text: "text 3",
                _id: 3
              }
            ]
          }
        },
        {
          question1: {
            selected: null,
            options: [
              {
                text: "text 2",
                _id: 2
              },
              {
                text: "text 3",
                _id: 3
              },
              {
                text: "text 4",
                _id: 4
              }
            ]
          }
        }
      ]
    };
  }
};
</script>