I have the following Dropdown in a Vue.js Project.

<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>

I want all these buttons to have different functions like:

Visit Website -> Link to a Website

Logout -> To Call a function

Purchase -> A Purchase Modal to appear

That's how I have been handling the drop-down buttons before using page routing.

<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>

But I think Page routing isn't the best way to go if we have buttons Drastically different in functionality. How should I go about it?

I have the following Dropdown in a Vue.js Project.

<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>

I want all these buttons to have different functions like:

Visit Website -> Link to a Website

Logout -> To Call a function

Purchase -> A Purchase Modal to appear

That's how I have been handling the drop-down buttons before using page routing.

<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>

But I think Page routing isn't the best way to go if we have buttons Drastically different in functionality. How should I go about it?

• javascript
• vue.js
• routes
• vuetify.js

Share Improve this question Follow edited Jun 26, 2023 at 8:15 Manan Sharma asked Sep 2, 2020 at 17:33 Manan SharmaManan Sharma 57111 gold badge55 silver badges2020 bronze badges 3

• 1 I would do this with watch. First I would have a selectedVal = "" in my data and then Whenever an option gets selected I would watch it and say like if selectedVal === Visit website then do this. else if it is === logout do this. However when you have like 100 options I dont think that this would be the best practise – omerS Commented Sep 2, 2020 at 20:00
• Thanks for the ment, Can you put it in an answer to explain better? – Manan Sharma Commented Sep 2, 2020 at 20:39
• 1 I can but I am not experienced with vuetify. So I will code it in only vue. – omerS Commented Sep 2, 2020 at 21:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

(not vuetify)I am not sure if this is the best practice but you can try this:

In my router there is an About page and it works ! Also when we select other options I can see the outputs in console. If you can adapt this code into vuetify, it can work.

<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>

Another way is to define a function to the menuItemsMisc's elements, then pass it to @click of v-btn.

<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.

You can add a function to each object in your array like so :

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

and use it with an event listener on click :

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

A bination of both answers worked for me!

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;
      }
    },
  },