When using Vuetify's v-list-item directive, I encountered an issue where the active prop cannot be removed once an item has been selected. Here is my approach so far:
<v-list-item-group pb-6 color="primary" class="pb-3 text-left">
<v-list-item v-for="(answer, index) in answers" :key="index">
<v-list-item-title :class="{ active: isActive }" v-text="answer" @click.prevent="selectAnswer(index)">
</v-list-item-title>
</v-list-item>
</v-list-item-group>
<b-button variant="primary" :disabled="hasAnswered" @click="submitAnswer()">
Submit
</b-button>
export default {
name: 'QuestionBox',
data () {
return {
answers: '',
selectedIndex: null,
hasAnswered: false,
isActive: undefined
}
},
methods: {
selectAnswer (ind) {
this.isActive = true
this.selectedIndex = ind
},
submitAnswer () {
this.hasAnswered = true
this.isActive = false
}
}
}
I understand that the :class="{ active: isActive }" will apply to the v-list-item-title, but given the v-list-item has a v-for loop, does anyone have any suggestions?