V-chip-group value is undefined

Question

I often run into this problem using the Vuetify v-chip-group.

I'm using the v-chip-group v-model, which is the selected chip index.

<v-chip-group
  v-model="selectedItem"
>

I set the value to -1 so by default so no v-chip is selected

        data() {
            return {
                selectedItem: -1,
            }
        }

The problem I encounter is when a v-chip is selected, it changes the value from its default, but when this v-chip item is deleted from the list, the selectedItem value becomes undefined.

Is there a way to put back the value to -1 in the cases where there isn't any selected chip ?

lkq lkq · Accepted Answer · 2020-01-08T22:35:15

You can watch the value and then reset it, but I'm wondering why you want this behaviour? Is it because you need to evaluate if the value is -1 so that you can do something else? I'm asking because I feel it makes sense for the component to set its value to 'undefined' when it is deselected.

data() {
  return {
    selectedItem: -1
  };
},
watch: {
  selectedItem(v) {
    console.log(v);
    if (!v) {
      this.selectedItem = -1;
    }
  }
}

V-chip-group value is undefined

1 Answers