Add an object to an array of objects vuetify model

Question

I'm trying to save the value of a radio button dynamically loaded into an array of object. Thoose radios are options for a series of questions of a form, and i would like to get something like:

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

But i don't know how should I define the data or how to reference it wiht the v-model attribute of the radio group.

This is my best try:

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

And data:

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

What I get rom this is somehting like: [anwswer_id1, anwswer_id1...], witch is close, but not exactly what I need

score 0 · Answer 1 · answered Jul 15 '20 at 08:00

a simple way could be like this:

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

where: questionIndex - keeps track of the current question index currentQuestionId - gives you the current question id handleClickButtonNext / handleClickButtonPrev - lets you jump between the questions

This is a way if you just want to show 1 question at a time.

Otherwise, you could also get rid of keeping track of the index, and loop the questions array:

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

I "don't know" how many questions do i have since i load them from and API, so i cant define the data objetc array :( — Xhark, Jul 15 '20 at 08:43
you could then get the questions from the API and create this array yourself by looping through the response and setting the data questions. Would you be able to do that? — dummker, Jul 15 '20 at 09:28

Add an object to an array of objects vuetify model

1 Answers1