I’ve a survey page in Vue JS which there is a dropdown which contains multiple options. There must be an answer selected by default whose answerid is stored in the api response as DefaultAnswerId. The problem is:
Whenever I’m opening the dropdown and trying to clear the default option which is No Answer, I’m neither able to clear it nor deselect it from the dropdown.
Can anyone help what can be the reason. Code given below
<template>
<v-select
v-model="question.SelectedAnswers"
:items="question.Answers"
item-text="ansName"
item-value="ansId"
clearable
placeholder="Select Answer"
multiple
@update:modelValue="getAvailableAnswers"
></v-select>
</template>
methods: {
getAvailableAnswers() {
if (!this.question.Answers || this.question.Answers.length === 0) {
return [];
}
if (this.question.SelectedAnswers === null ||
this.question.SelectedAnswers === undefined ||
this.question.SelectedAnswers.length === 0) {
// Check if there is a default system ID and it's not null
if (this.question.DefaultAnswerId !== undefined && this.question.DefaultAnswerId !== null) {
this.question.SelectedAnswers = [this.question.DefaultAnswerId];
}
this.question.saveResponse = true; // This saves the answer
}
// Regular handling for answers
const answers = this.question.Answers.filter(ans => ans.ResponseId === this.question.ResponseId);
return answers; //This returns the answers array
}
}