Vue.js: Efficiently handling multiple buttons within a Dropdown menu

Question

Vue.js: Efficiently handling multiple buttons within a Dropdown menu

I am currently working on a Vue.js Project and have a Dropdown component. Here is the code snippet:

<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 have specific functions in mind for each button:

Visit Website -> Link to a Website

Logout -> Execute a function

Purchase -> Display a Purchase Modal

I used to handle these buttons differently with page routing, but I believe it might not be the most efficient approach for buttons with distinct functionalities. How should I proceed?

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

javascript vue.js routes vuetify.js

Answer 1

Answer №1

(not vuetify)I'm not certain if this approach is ideal, but you could give it a shot:

Within my router, there exists an About page that functions as expected! Furthermore, upon selecting alternative options, I can observe the outputs in the console. If you can implement this code in vuetify, it should function smoothly.

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

Answer 2

(not vuetify)I'm not certain if this approach is ideal, but you could give it a shot:

Within my router, there exists an About page that functions as expected! Furthermore, upon selecting alternative options, I can observe the outputs in the console. If you can implement this code in vuetify, it should function smoothly.

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

Answer 3

Answer №2

To implement this functionality, you can create a function for each element in the menuItemsMisc array and then pass it to the @click event of the 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");
        }
      }
    ]
  })
};

Check out a demo here.

Answer 4

To implement this functionality, you can create a function for each element in the menuItemsMisc array and then pass it to the @click event of the 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");
        }
      }
    ]
  })
};

Check out a demo here.

Answer 5

Answer №3

To enhance your array of objects, simply attach a function to each item like this :

menuItemsMisc: [
                { title: 'Go to Website', fn: () => { this.$router.push('/') }},
                { title: 'Sign Out'      , fn: () => { /* Add your custom code here */ }},
                { title: 'Buy Now'       , fn: () => { /* Implement your own logic */ }},
            ]

Then, make use of the function with an event listener upon clicking :

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

Answer 6

To enhance your array of objects, simply attach a function to each item like this :

menuItemsMisc: [
                { title: 'Go to Website', fn: () => { this.$router.push('/') }},
                { title: 'Sign Out'      , fn: () => { /* Add your custom code here */ }},
                { title: 'Buy Now'       , fn: () => { /* Implement your own logic */ }},
            ]

Then, make use of the function with an event listener upon clicking :

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

Answer 7

Answer №4

I found a great solution by combining elements from both responses!

data: () => ({
  menuItemsMisc: [
    { title: "Save Template" },
    { title: "Edit Attendance" },
  ],
)}




watch: {
  selectedValue: function () {
      if (this.selectedValue === "Save Template") {
        this.saveAsTemplate(this.topListWithName);
      } else if (this.selectedValue === "Edit Attendance") {
        this.updateAttendance = true;
      }
    },
  },

Answer 8

I found a great solution by combining elements from both responses!

data: () => ({
  menuItemsMisc: [
    { title: "Save Template" },
    { title: "Edit Attendance" },
  ],
)}




watch: {
  selectedValue: function () {
      if (this.selectedValue === "Save Template") {
        this.saveAsTemplate(this.topListWithName);
      } else if (this.selectedValue === "Edit Attendance") {
        this.updateAttendance = true;
      }
    },
  },

Vue.js: Efficiently handling multiple buttons within a Dropdown menu

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When attempting to pass data to another page by clicking on a row, the result is that the data appears to be empty

"Switching to a new request in jqgrid will automatically cancel the current

Mastering parameter passing in Node.js functions: A comprehensive guide

The incorporation of zoom disrupts the smooth scrolling capability of the menu

"Step-by-step guide on showcasing a specific blog post using its unique identifier in an Angular/Express/MongoDB application

Stopping a JavaScript promise.all() based on a certain condition

What steps should I take to resolve the "StrictMode has found deprecated findDOMNode" error?

Encountering a ReferenceError while debugging MongoDB: The console object is undefined

Using JavaScript to bring in npm packages

Showing a dynamically updated array in Angular

Issue with Mongoose Promise failing to transfer data to the following chain

Problem with validation in jQuery not being compatible with Kendo Button (sample code provided in jsfiddle)

Dealing with browser timeouts for HTTP requests using JavaScript

developing a custom modal using a button in a React project with Material UI

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

The process of passing parameter values by function in useEffect

What is the proper method for utilizing the "oneOf" keyword in this schema?

how to use jQuery to hide a flash-containing div without losing its content

Is there a way in WebStorm to create a "virtual" folder for conveniently organizing and hiding config files, or perhaps a feature that allows for easily toggling visibility of certain files?

altering the color of various spans consecutively