[Vuejs]-Add an object to an array of objects vuetify model

0๐Ÿ‘

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>

Leave a comment