CODEWITHSUNDEEP
vue.jsvuetify.js
devoln
devoln

Reputation: 406

Deselect v-list-item when changing its value

I have a v-list-item-group with some v-list-item's inside with an associated value. The problem is that when I change the value of the selected v-list-item it doesn't react. I want it to be selected only when the new value matches the v-list-item-group's model and be unselected otherwise. What is the best way to achieve such a behaviour?

Example. When you edit the list item value, for example, by changing the lower left field from "Bluetooth" to "Bluetooth1", I want the list item to get deselected automatically because its value isn't longer matching v-list-item-group's model ("Bluetooth1" != "Bluetooth"). And when you change it back to "Bluetooth" I want it to get selected again. The one on the right modifies the v-list-item-group's model and this works as expected.

My actual use case is rendering lists of thousands of elements quickly without rendering them all. To achieve it I use a recycle-scroller component inside my v-list-item-group to manage its items. It creates a few dozens of v-list-items and as user scrolls it reuses them by moving them around and replacing their value, icon and text with corresponding data from my array. The problem is that when user selects some list item then scrolls the list, the selected item gets reused. Despite the fact that it now has a different value, text and icon it still looks as selected. So they see it as if some different item was selected.

Upvotes: 1

Views: 1910

Answers (1)

ExcessJudgment
ExcessJudgment

Reputation: 228

I hope this works for you:

<v-list-item-group v-model="model" :color="color">
// other html

Then add a computed property:

computed: {
  color(){
    if (this.model == this.items[1].text) {
        return 'indigo'
    } else {
        return 'black'
    }
  }
}

Upvotes: 1

Related Questions