Vue.js：在下拉菜单中管理多个按钮答案

【问题标题】：Vue.js: Managing multiple buttons in DropdownVue.js：在下拉菜单中管理多个按钮
【发布时间】：2020-09-02 17:33:12
【问题描述】：

我在 Vue.js 项目中有以下下拉菜单。

<template>
    <v-menu close-on-click transition="slide-y-transition">
        <template v-slot:activator="{ on, attrs }"> 
            <v-btn  color="primary" v-bind="attrs" v-on="on">
                Menu
            </v-btn>
        </template>
        <v-list>
            <v-list-item v-for="(item, index) in menuItemsMisc" :key="index">
                <v-list-item-title>
                    <v-btn block color="white">{{ item.title }}</v-btn>
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>
<script>
export default {
    name: 'MenuBar',
    data: () => ({
        menuItemsMisc: [
            {   title: 'Visit Website' },
            {   title: 'Logout' },
            {   title: 'Purchase' },
        ]       
    }),
}
</script>

我希望所有这些按钮都具有不同的功能，例如：

访问网站 -> 链接到网站

注销 -> 调用函数

购买 -> 出现的购买模式

这就是我在使用页面路由之前处理下拉按钮的方式。

<v-list-item v-for="(item, index) in menuItemsPages" :key="index">
    <v-list-item-title>
        <v-btn :to= "'/' + item.url" >{{ item.title }}</v-btn>
    </v-list-item-title>
</v-list-item>

但我认为，如果我们的按钮功能完全不同，页面路由并不是最好的方法。我该怎么办？

【问题讨论】：

我会用手表来做这个。首先，我在我的数据中有一个选择的val =“”，然后只要选择选项，我会观看它并说出选择val ===访问网站然后执行此操作。否则，如果是 === 注销，请执行此操作。但是，当您有 100 个选项时，我认为这不是最好的做法
感谢您的评论，您能把它放在答案中以便更好地解释吗？
我可以，但我对 vuetify 没有经验。所以我只会在vue中编码。

标签： javascript vue.js routes vuetify.js

【解决方案1】：

两个答案的组合对我有用！

data: () => ({
  menuItemsMisc: [
    { title: "Vorlage speichern" },
    { title: "Anwesenheit bearbeiten" },
  ],
)}




watch: {
  selectedValue: function () {
      if (this.selectedValue === "Vorlage speichern") {
        this.saveAsVorlage(this.topListWithName);
      } else if (this.selectedValue === "Anwesenheit bearbeiten") {
        this.updateAnwesenheit = true;
      }
    },
  },

【讨论】：

请解释您的组合解决方案及其作用。
我有一个“动作”v-btn。 @click 会再打开 2 个按钮。取决于单击的 v-btn，设置了“selectedValue”。观察者正在根据 selectedValue 的值启动一个方法。

【解决方案2】：

（不是 vuetify）我不确定这是否是最佳做法，但你可以试试这个：

在我的路由器中有一个关于页面，它可以工作！此外，当我们选择其他选项时，我可以在控制台中看到输出。如果你能把这段代码改编成vuetify，它就可以工作了。

<template>
  <div class="home">
      <select v-model="selectedValue">
        <template v-for="(item, index) in menuItemsMisc">
            <option :value="item.title" :key="index"> {{item.title }} </option>
        </template>
      </select>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  data() {
    return {
      selectedValue : "",
      menuItemsMisc: [
            {   title: 'Visit Website' },
            {   title: 'Logout' },
            {   title: 'Purchase' },
        ]       
    }
  },
  watch: {
    "selectedValue": function() {
      if (this.selectedValue === "Visit Website") {
        this.$router.push({name: "About"})
      }
      else if (this.selectedValue === "Logout") {
        this.doSomething()
      }
      else {
        this.purchase()
      }
    }
  },
  methods: {
    doSomething() {
      console.log("I AM DOING SOMETHING")
    },
    purchase() {
      console.log("hello purchase")
    }
  }
 
}
</script>

【讨论】：

【解决方案3】：

另一种方法是给menuItemsMisc的元素定义一个函数，然后将其传递给v-btn的@click。

<template>
  <v-menu close-on-click transition="slide-y-transition">
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="primary" v-bind="attrs" v-on="on">Menu</v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in menuItemsMisc" :key="index">
        <v-list-item-title>
          <!-- Pass `item.click` to `@click` -->
          <v-btn block color="white" @click="item.click">{{ item.title }}</v-btn>
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

export default {
  name: "Home",
  data: () => ({
    menuItemsMisc: [
      {
        title: "Visit Website",
        click: () => {
          // Go to a route
          this.$router.push({ name: "About" });
        }
      },
      {
        title: "Logout",
        click: () => {
          // Call a function
          console.log("Logging out...");
        }
      },
      {
        title: "Purchase",
        click: () => {
          // Show modal
          console.log("Showing purchase modal");
        }
      }
    ]
  })
};

Here is a sample demo.

【讨论】：

【解决方案4】：

您可以像这样向数组中的每个对象添加一个函数：

menuItemsMisc: [
                { title: 'Visit Website', fn: () => { this.$router.push('/') }},
                { title: 'Logout'       , fn: () => { /* Your logic */       }},
                { title: 'Purchase'     , fn: () => { /* different logic */  }},
            ]

并在单击时将其与事件侦听器一起使用：

<v-btn @click="item.fn" >{{ item.title }}</v-btn>

【讨论】：