时间戳

首页 > 解决方案 > 如何“锁定”Vuetify v-list-item-group 选择？

vue.js - 如何“锁定”Vuetify v-list-item-group 选择？

问题描述

我有一个v-list-item-group有状态的列表项。问题是一旦选择了任何一个，我想禁用更改当前选定的项目。

为此，我尝试watch在所选项目上添加 a 并恢复它v-model的旧值。然而，它最终进入了一个无限循环（你知道，我在它自己的观察者中分配了新值）。

<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的选择？- 显然上面的片段不是正确的方法。

标签： vue.jsvuetify.js

解决方案

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

  2. 为您的 v-list-items添加一个v-bind:disabled="lockSelection"属性。

  3. @click="lockSelection = true"为您的 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>

推荐阅读