如何解决Vue.js:管理下拉菜单中的多个按钮
我在Vue.js项目中具有以下下拉列表。
table = pd.pivot_table(df,values='results',index=['code_station','year','month'],columns=['analyse'],aggfunc=np.sum)
我希望所有这些按钮都具有不同的功能,例如:
访问网站->链接到网站
注销->调用功能
购买->出现购买模式
这就是我在使用页面路由之前一直处理下拉按钮的方式。
<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>
但是我认为,如果我们的按钮功能完全不同,那么页面路由并不是最好的选择。我该怎么办?
解决方法
(不公开)我不确定这是否是最佳做法,但您可以尝试以下方法:
在我的路由器中有一个“关于”页面,它可以正常工作!同样,当我们选择其他选项时,我可以在控制台中看到输出。如果您可以将此代码改编为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>
,
另一种方法是为menuItemsMisc
的元素定义一个函数,然后将其传递给@click
的{{1}}。
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>
,
您可以像这样向数组中的每个对象添加一个函数:
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。