Question

我有一个v-list-item-group，用于获取有状态的列表项。问题是我希望在选择任何项目后禁用更改。

为此，我尝试在所选项目上添加watch并还原其旧值的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”？ -显然以上代码段是不正确的方法。

Answer 1

在您的data()方法中添加一个属性，例如lockSelection。将其初始化为false。
向您的v-list-items中添加v-bind:disabled="lockSelection"属性。
向您的v-list-items添加@click="lockSelection = true"侦听器。

<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选择？

1 个答案: