CODEWITHSUNDEEP
vue.jsvuetify.js
William Colmenares
William Colmenares

Reputation: 148

Vuetify, set value to v-select ignoring items

I'm trying to set a given string to v-select but no idea of how to do this (it is only displayed when I use a a valid :items value), I dropped using v-model because I have an object to store the data, and I'm also constantly adding/deleting items so users cannot choose a given option twice.

Here's the code:

<v-select v-for="(item, index) in securityQuestions" :key="index"
    :menu-props="{ offsetY: true }"
    outlined
    dense
    placeholder="Choose a question"
    :items="optionsComputed"
    :value="item.question" // * <---------------------- this is my goal
    @input="addQuestion(item, index, $event)"
></v-select>

data() {
    return {
      options: [
        "Question 1",
        "Question 2",
        "Question 3",
        "Question 4",
        "Question 5"
      ],
      securityQuestions: [
        { question: "", value: "" },
        { question: "", value: "" },
        { question: "", value: "" },
        { question: "", value: "" },
        { question: "", value: "" },
        { question: "", value: "" }
      ]
    }
},
methods: {
    addQuestion(item, index, event) {
      if (item.question !== "") {
        this.options.push(item.question);
      }
      this.options.splice(this.options.indexOf(event), 1);
      this.securityQuestions[index].question = event;
    }
}

Any idea of how to achieve this?

Upvotes: 0

Views: 2093

Answers (1)

NBlack
NBlack

Reputation: 304

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

Upvotes: 1

Related Questions