Как очистить активный элемент в Vue v-list?

Question

В директиве v-list-item Vuetify я не могу удалить активную опору, когда элемент выбран. Пока что это то, что я пробовал:

      <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
    }
  }
}

Я знаю, что :class="{ active: isActive }" будет применяться к v-list-item-title-заголовку, но v-list-item имеет v-у кого есть идеи?

Answer 1

Вы можете сделать это, используя v-model

Вызов метода clear из примеров очистит выбор

Пример (одиночный выбор):

<v-list-item-group v-model="selection">

data: () => ({
  selection: null
}),
methods:{
  clear(){ this.selection = null }
}

Пример (множественный выбор):

<v-list-item-group v-model="selection" multiple>

data:() => ({
  selection: []
}),
methods:{
  clear(){ this.selection = [] }
}