Deselect v-list-item when changing its value

1
votes

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.

1
vue.jsvuetify.js
Not 100% clear what you want to achieve - the selection works ok IMO. I can select/deselect and the selection gets displayed on the lower right input. But I am not sure what you want to achieve with the Input on the lower left corner. What's the purpose of the input ? What should it do ? – Pascal Lamers
so you only want the item to be selected when both , the left input matches the right one – Pascal Lamers
I played around a bit with v-list-item-group , tbh the documentation doesn't give me much options. Can you tell me more about your use case ? Maybe it's easier with another component ? – Pascal Lamers
Edited my question and added my use case explanation. "so you only want the item to be selected when both , the left input matches the right one" yes, you are right for this example. In my actual use case any element may change, not only one. – devoln
So when the user scrolls , the initial selected item should stay selected or the selection should be deselected. Since I couldn't find a method to programmatically deselect within v-list-item-group component, I probably would go with the first option, to keep the initial selection while scrolling - That's something I can work with :) I ll let you know – Pascal Lamers

1 Answers

1
votes

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