Vuetify, set value to v-select ignoring items - vue.js

Question

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?

Answer 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