How to "lock" Vuetify v-list-item-group selection?

Question

I have a v-list-item-group for having a stateful list items. The thing is I want to disable altering the currently selected item once any is selected.

To achieve that, I tried adding a watch on the selected item and reverting the v-model of the old value of it. However, it ends up in an infinite loop (you know, I assign new value inside its own watcher).

<template>
  <v-list>
    <v-list-item-group v-model="model" :mandatory="!!model">
      <v-list-item v-for="(item, i) in items" :key="`item-${i}`" :value="item">
        <v-list-item-content>
          <v-list-item-title v-text="item"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</template>
<script>
  export default {
    data: () => ({
      items: [
        'item1',
        'item2',
        'item3'
      ],
      model: null,
    }),
    watch: {
      model (val, oldVal) {
        // This logic will change the value and trigger watcher again and again
        this.val = oldVal
    }
  }
</script>

So, how to lock the selection of a `v-list-item-group? -apparently the snippet above is not the right way.

Tanner Tanner · Accepted Answer · 2019-11-15T14:03:22

Add a property in your data() method, such as lockSelection. Initialize it as false.
Add a v-bind:disabled="lockSelection" attribute to your v-list-items.
Add a @click="lockSelection = true" listener to your v-list-items.

<template>
  <v-list>
    <v-list-item-group v-model="model" :mandatory="!!model">
      <v-list-item v-for="(item, i) in items" :key="`item-${i}`" :value="item"
        :disabled="lockSelection" @click="lockSelection=true">
        <v-list-item-content>
          <v-list-item-title v-text="item"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</template>
<script>
  export default {
    data: () => ({
      items: [
        'item1',
        'item2',
        'item3'
      ],
      model: null,
      lockSelection: false
    }),
    watch: {
      model (val, oldVal) {
        // This logic will change the value and trigger watcher again and again
        this.val = oldVal
    }
  }
</script>

How to "lock" Vuetify v-list-item-group selection?

1 Answers