[Vuejs]-Vuetify, set value to v-select ignoring items

1👍

Just use item-value and item-text props of v-select.

This code is working but have a problem, you can’t have 2 questions with same answer in value.

<template>
  <v-app v-if="securityQuestions && options && answers">
    <v-select
      v-for="(item, index) in securityQuestions"
      :key="index"
      :menu-props="{ offsetY: true }"
      outlined
      dense
      :disabled="answers[index] !== undefined"
      :placeholder="answers[index] || options[index]"
      :items="questions"
      item-text="question"
      item-value="value"
      @input="addQuestion(item, index, $event)"
    ></v-select>
    Your selection: {{ answers }}
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      options: [
        "Question 1 - Blablabla?",
        "Question 2 - What more?",
        "Question 3 - You did it?",
        "Question 4 - Of couse?",
        "Question 5 - Anything more?",
        "Question 6 - Goal!"
      ],
      securityQuestions: [
        { question: "Option 1", value: "O1", used: false },
        { question: "Option 2", value: "O2", used: false },
        { question: "Option 3", value: "O3", used: false },
        { question: "Option 4", value: "O4", used: false },
        { question: "Option 5", value: "O5", used: false },
        { question: "Option 6", value: "O6", used: false }
      ],
      answers: [],
      optionSelected: ""
    };
  },
  methods: {
    addQuestion(item, index, value) {
      this.answers[index] = value;
      this.securityQuestions[
        this.securityQuestions.findIndex(
          el => el.value === value && el.used === false
        )
      ].used = true;
    }
  },
  computed: {
    questions() {
      return this.securityQuestions.filter(obj => {
        return obj.used === false;
      });
    }
  }
};
</script>

Here you are codesandox:
https://codesandbox.io/s/vue-with-vuetify-eagles-413zf

👤NBlack

Leave a comment