[Bug Report] Dynamically updating v-list-item-group's v-list-items causes group's selected v-model value to diverge from actual selection

[wallslide]

Environment

Vuetify Version: 2.3.14 Vue Version: 2.6.12 Browsers: 85.0.4183.121 OS: Windows 10

Steps to reproduce

1. Toggle the "Hide archived messages" switch off.

a new item at the top of the list will appear

2. Click any item

a new message appears below the list that shows which item the selection is pointing to, which differs from the actual selected item.

Expected Behavior

The selection value (representing the index of the v-list-item being selected) should sync up with the item being clicked and visually shown as selected. This works if the switch is toggled on.

Actual Behavior

When v-list-items are generated with v-for in a v-list-item-group, and the array of items which is backing the v-for has items added to the beginning of the array, the v-list-item-group's v-model selection index gets out of sync with the actual selected item.

Reproduction Link

https://codesandbox.io/s/dynamic-item-groups-issue-3cjmk

[myleshk]

Same problem

[abel-tefera]

Got the same issue...please fix

[carlmrichter]

Same issue here. Got it to work for me with setting the is-active class manually and overwrite the vuetify styles for the active item:

<v-list-item-group
    class="side-navigation__list-item-group"
    :value="value"
    @change="v => $emit('change', v)"
>
    <v-list-item
        v-for="item in items"
        :key="item.hash"
        :to="`#${item.hash}`"
        class="side-navigation__list-item"
        :class="{ 'is-active': item.hash === items[value].hash }"
    >
        <!-- ... -->
    </v-list-item>
</v-list-item-group>

[filonik]

Same problem, rather annoying.

[Mert75]

@johnleider occurs on latest version (v2.3.8)

[mustard123]

same problem, what to do in the meantime?

[delbertlegg]

Also found same issue when the order of the items change. Items in the list retain their original "selected" index value even if it doesn't reflect actual order in list.

[dzlabs]

Same issue

[userbig]

Have the same issue when append or delete entries to\from the list. Also when I add data -> all selected items disappear. Sad!

[sjc311]

Also experiencing this issue or a similar one. v-list-item-group v-model variable is emptied/reset when the v-list-item list is changed out. Weirdly I thought it was working all well and dandy at first, it was only until I did a production build that this showed its face.

[yojahny55]

I used a Set object instead of array on v-model and works for me.

[ranyuhan]

      <v-list-item-group
        active-class="yellow--text"
        :value="selected"
        >
          <v-list-item
            v-for="(office, index) in offices"
            v-bind:key="index"
             @change="changeSelected(index)"
          >

methods: { changeSelected(index) { this.selected = index this.$emit('change', this.selected); },

above solution works for me

[Xinrea]

Same problem with lastest version v2.5.8. I need to operate with multiple-select v-list-item-group, and i figured out that forcing the v-list-item-group update works for me. Basicly you need to change the key of this component after any dynamic change of v-list data.

<v-list-item-group
  :key="itemGroup"
  v-model="selectItems"
  multiple
>

data () {
  return {
    itemGroup: 0,
    selectItems: []
  }
}

forceUpdate() {
  this.itemGroup += 1
}

[Yonier]

Same problem with lastest version v2.5.8. I need to operate with multiple-select v-list-item-group, and i figured out that forcing the v-list-item-group update works for me. Basicly you need to change the key of this component after any dynamic change of v-list data.

<v-list-item-group
  :key="itemGroup"
  v-model="selectItems"
  multiple
>

data () {
  return {
    itemGroup: 0,
    selectItems: []
  }
}

forceUpdate() {
  this.itemGroup += 1
}

This solution is a little heavy for the Dom and slow... but this works ok for now (2.6.7).

[johnleider]

Isn't this resolved by manually adding a value to v-list-item? I don't doubt there is an issue here, but the example is very convoluted tbh. What are the specific reasons that you chose to handle model updates and item generation like this?

[KaelWD]

Yeah we tried to solve this in v3 but really the only way to ensure a stable value is to bind it. You can use the iteration index if you want an index but there's no reliable way to do it automatically.