Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How To Show Only One V-Menu At A Time When Clicking To Show The Menu?
The task we are going to perform in this article was how to show only one v-menu at a time when clicking to show the menu, let’s dive into the article for getting better understanding on v-menu.
A customized version of NativeUI was used to create the server-side trainer and menu known as vMenu. It features complete permissions support, allowing the server owner to control who can do what.
Displaying v-menu
A user interface's menu is a flexible element. It displays a popover with a variety of uses, like presenting a menu of choices. They may be used in conjunction with buttons, toolbars, or app bars.
For getting more idea on displaying only one v-menu at a time when clicking to show the menu, let’s look into the following example.
Example
Considering the following example, where we are displaying only one v-menu at a time when clicking to show the menu on a webpage.
<!DOCTYPE html>
<html>
<body>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.9/dist/vuetify.min.js"></script>
<div id="tutorial">
<v-app>
<div>
<v-menu :open-on-hover="true" :open-on-click="true" v-for="(user, index) in userInfo" nudge-top="50px" :key="index" v-model="show[index]" top>
<template v-slot:activator="{ on, attrs }">
<v-avatar v-on="on" size="24" color="blue">
<span>{{user.name}}</span>
</v-avatar>
</template>
<span>{{user.favoritecar}}
<span>
</v-menu>
<v-btn @click="showTooltip">Button</v-btn>
</v-app>
</div>
<script>
new Vue({
el: "#tutorial",
vuetify: new Vuetify(),
data() {
return {
userInfo: [{
id: 1,
name: "x",
favoritecar: "RX100"
}, {
id: 2,
name: "y",
favoritecar: "DUCATI"
}, {
id: 3,
name: "z",
favoritecar: "RANGEROVER"
}],
show: [false, false, false, false]
};
},
methods: {
showTooltip() {
console.log("Open tooltip");
Vue.set(this.show, 2, true);
}
}
});
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the list options along with a click button on the webpage. When the user clicks the button, it will display the list's three items on the webpage.
Example
In the following example, we are running the script to display a v-menu on clicking the button displayed on the webpage.
<!DOCTYPE html>
<html>
<body>
<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>
<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">
<div id="tutorial">
<v-app>
<div>
<v-menu>
<template v-slot:activator="{ on }">
<v-btn v-on="on">Select</v-btn>
</template>
<transition-group tag="items" name="fade">
<v-list-item v-if="!t" @click="t=!t" key="1">
<v-list-item-title>MSD</v-list-item-title>
</v-list-item>
<v-list-item v-else @click="t=!t" key="2">
<v-list-item-title>VIRAT</v-list-item-title>
</v-list-item>
</transition-group>
</v-menu>
</div>
</v-app>
</div>
<script>
new Vue({
el: '#tutorial',
vuetify: new Vuetify(),
data: () => ({
t: true
})
})
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of a click button on the webpage. When the user clicks the button, it will display the v-menu for the first key, and if the user again clicks the button, it will show the v-menu for the second key.
718 Views
