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
Source:stackexchange.com