vuetifyjs v 列表。如果点击项目第二次项目不活跃。 v-模型="undefined"

Question

我使用 vuetifyjs 的标准 v-list 组件。用于创建菜单和显示项目列表。但是如果我第二次点击活动元素是隐藏的。而且我没有看到菜单的活动元素。这对我的菜单不好。 Link 例如 v-list

如果使用下面的 pug 模板

v-list(dense)
  v-list-item-group(color="success" v-model="selectedItem")
    v-list-item(v-for="(gallery, key) in galleries" :key="key")
      v-list-item-content
        v-list-item-title(v-text="gallery")

Answer 1

我有办法。它需要 watch 变量并通过单击项目的键设置强制索引。如果我们有 'undefined' set force data 方法

运行考试解答 Solution

代码如下：

<template>
  <div id="app">
  <v-app id="inspire">
    <v-card max-width="300" >
      <v-list dense>
        <v-list-item-group
          v-model="selectedItem"
          color="primary"
        >
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
          >
            <v-list-item-content @click="setItem(i)">
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>
</template>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    index: 0,
    selectedItem: 0,
    items: [
      { text: 'Real-Time'},
      { text: 'Audience' },
      { text: 'Conversions'},
    ],
  }),
  watch: {
    selectedItem() {
      if (typeof this.selectedItem === 'undefined') {
        setTimeout(() => {
          this.selectedItem = this.index;
        }, 500);
      }
    },
  },
  
  methods: {
    setItem(index) {
      this.index = index;
    },
  },
})

Answer 2

另一个解决方案是禁用与 selectedItem 具有相同索引的 v-list-item

<template>
  <div id="app">
  <v-app id="inspire">
    <v-card max-width="300" >
      <v-list dense>
        <v-list-item-group
          v-model="selectedItem"
          color="primary"
        >
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
            :disabled="i == selectedItem"
          >
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>
</template>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selectedItem: 0,
    items: [
      { text: 'Real-Time'},
      { text: 'Audience' },
      { text: 'Conversions'},
    ],
  }),
})

vuetifyjs v 列表。如果点击项目第二次项目不活跃。 v-模型="undefined"

vuetifyjs v-list. If click to item second time item not active. v-model="undefined"

vuetify.js