如何“锁定"Vuetify v-list-item-group 选择? [英] How to "lock" Vuetify v-list-item-group selection?

问题描述

我有一个 v-list-item-group 用于有状态的列表项.问题是我想禁用更改当前选定的项目，一旦被选中.

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.

为了实现这一点，我尝试在所选项目上添加一个 watch 并恢复其旧值的 v-model.然而，它最终进入了一个无限循环(你知道，我在它自己的观察者中分配了新的值).

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>

那么，如何锁定一个`v-list-item-group的选择?- 显然上面的片段不是正确的方法.

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

推荐答案

1. 在您的 data() 方法中添加一个属性，例如 lockSelection.将其初始化为 false.

1. Add a property in your data() method, such as lockSelection. Initialize it as false.

将 v-bind:disabled="lockSelection" 属性添加到您的 v-list-items.

Add a v-bind:disabled="lockSelection" attribute to your v-list-items.

向您的 v-list-items 添加一个 @click="lockSelection = true" 侦听器.

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>

这篇关于如何“锁定"Vuetify v-list-item-group 选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！