如何清除 Vue v-list 中的活动项？

Question

在 Vuetify 的 v-list-item 指令中，一旦选择了一个项目，我就无法删除活动道具。到目前为止，这是我尝试过的：

      <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-for，所以有人有什么想法吗？

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 = [] }
}