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

Question

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

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