英文:
Vuetify - Listen for v-menu activator?
问题
我想在Vuetify的v-menu打开时执行一些操作，我该如何做呢？我可以以某种方式监视激活器吗？
英文:
I would like to do some actions when the v-menu is opened up in Vuetify? How can I do that? Can I watch the activator somehow?
答案1
得分: 0
感谢你，Jacek，
像这样监听 v-menu 的 v-model。
<template>
<div class="text-center">
<v-menu offset-y v-model="menu_model">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">{{ buttonText }}</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me 2" }
],
menu_model: "",
buttonText: "Click to open menu"
}),
watch: {
menu_model(menu_open) {
if (menu_open === true) {
this.buttonText = "Menu Open";
} else {
this.buttonText = "Click to open menu";
}
}
}
};
</script>
英文:
Thank you jacek,
Listen to the v-model of the v-menu like this.
<template>
<div class="text-center">
<v-menu offset-y v-model="menu_model">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">{{ buttonText }}</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me 2" }
],
menu_model: "",
buttonText: "Click to open menu"
}),
watch: {
menu_model(menu_open) {
if (menu_open === true) {
this.buttonText = "Menu Open";
} else {
this.buttonText = "Click to open menu";
}
}
}
};
</script>
答案2
得分: 0
根据Vuetify 2.6.3，我们可以使用活动器插槽中的'value'。这是链接。
这是到Codepen的链接。
<template>
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu offset-y v-model="menu_model">
<template v-slot:activator="{ on, value }">
<v-btn
color="primary"
dark
v-on="on">
{{ value ? 'Click to open menu' : 'Menu Open' }}
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
menu_model: false,
}),
})
</script>
英文:
As per Vuetify 2.6.3, we can make use of 'value' from activator slot. Here is the link
Here is the link to Codepen
<template>
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu offset-y v-model="menu_model">
<template v-slot:activator="{ on, value }">
<v-btn
color="primary"
dark
v-on="on">
{{ value ? 'Click to open menu' : 'Menu Open' }}
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论