如何使用 vuetify 2.x 创建结合图标和文本的菜单项？

Question

我需要创建一个包含一些选中菜单项的菜单。这是用于切换选项。

单击菜单项时，应该会在菜单项前面显示和删除复选图标。理想情况下，选择切换菜单时菜单不应关闭。

用开关制作对话框会很不方便，因为它需要多次点击才能执行操作，而且用户不会对效果有直接的反馈。切换菜单项修改显示列表的过滤规则。

我当前的代码有切换菜单项，但没有带检查图标的用户反馈。

不确定选中的菜单是否与 material 设计兼容。

编辑：给菜单项添加图标很简单。

          <v-list-item @click="maskZero">
            <v-list-item-title>
              {{ $i18n.t("list.maskZero") }}
            </v-list-item-title>
            <v-list-item-icon v-bind:class="showWhenMaskZero">
              <v-icon> mdi-check </v-icon>
            </v-list-item-icon>
          </v-list-item>

  // . . .
  computed: {
    showWhenMaskZero() {
      return {
        "d-none": !this.$store.maskZero,
      };
    },
  },

不起作用的是切换它的可见性。 showWhenMaskZero() 函数仅在第一次显示菜单时调用。

如何强制更新菜单内容？

Answer 1

在vue中你有两个命令供你使用，你可以在元素上使用它们来控制它的可见性或渲染状态，这两个是v-if和v-show，不同的是v-if="true" 实际上将元素呈现给 DOM 而 v-show="true" 只是控制它的可见性。

所以你可以做的是使用 v-show 或 v-if 并向它们传递一个结果为 true 或 false 的表达式，或者简单地向它们传递一个变量boolean 类型并通过 onclick 方法控制该变量的值。

查看下面的示例以获得提示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    lists: [
      { id: 1, title: 'one', isChecked: false },
      { id: 2, title: 'two', isChecked: false },
      { id: 3, title: 'three', isChecked: false },
    ],
  },
  methods: {
    toggleSelection(selectedItemId) {
      const selectedItem = this.lists.find((item) => item.id === selectedItemId);
      selectedItem.isChecked = !selectedItem.isChecked;
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-list>
          <v-list-item v-for="{id, title, isChecked} in lists" :key="id" @click="toggleSelection(id)">
            <v-list-item-title>
              {{ title }}
            </v-list-item-title>
            <v-list-item-icon v-show="isChecked">
              <v-icon> mdi-check </v-icon>
            </v-list-item-icon>
          </v-list-item>
        </v-list>
      </v-container>
    </v-main>
  </v-app>
</div>

如何使用 vuetify 2.x 创建结合图标和文本的菜单项？

How to create menu items combining icon and text with vuetify 2.x?

vuejs2

vuetify.js