vue.js - Vuetify - 防止 v-list-item-group 取消选择

Question

我的设置v-list与v-list-item-groupVuetify 帮助中显示的设置非常相似：

https://vuetifyjs.com/en/components/lists/#flat

如果用户单击相同的v-list-item两次，我的问题就会出现 - 然后取消选择它而不选择另一个项目。

我尝试将 映射v-model到 computed并停止集合get()，set()但这没有任何效果。

我真的希望以编程方式设置所选项目，并从@click事件中控制它。

标签： vue.jsvuetify.js

Answer 1

您是否尝试过使用 的mandatory属性v-list-item-group？它似乎做了一些接近你想要的事情 - 用户不能取消选择一个项目，但可以切换到另一个项目。像这样的东西：

    <v-card class="mx-auto" max-width="300" tile>
      <v-list flat>
        <v-subheader>REPORTS</v-subheader>
        <v-list-item-group v-model="selectedItem" color="primary" mandatory>
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <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>