CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuetify.js
ltachigt
ltachigt

Reputation: 75

How can I clear active item in Vue v-list?

In Vuetify's v-list-item directive I can't remove the active prop once an item has been selected. So far this is what I have tried:

      <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 know the :class="{ active: isActive }" will apply to the v-list-item-title, but the v-list-item has the v-for so anyone has any ideas?

Upvotes: 2

Views: 8505

Answers (1)

Daniel
Daniel

Reputation: 35704

You can do that by using the v-model

Calling clear method from examples will clear the selection

Example (single selection):

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

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

Example (multiple selections):

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

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

Upvotes: 5

Related Questions