Topic: Dropdown work only one time
Korbitsch pro asked 6 years ago
Hi all,
I have following problem, my dropdown is working only one time then the toggle variable doesn't change. It seems that the function handleToggle fired only once and then get ignored but the away function from vue-clickaway is fired everytime i click also on the dropdown itself.
I copied all exactly from the downloaded source. The only thing I have done is removed the local registration and made it global.
I am using Laraval + Vue
Dropdown.vue (without scoped style):
<template>
<component :is="tag" :class="className" :style="style">
<span @click="handleToggle" v-on-clickaway="away">
<slot name="toggle"></slot>
</span>
<transition @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
<div v-if="toggle" :class="collapseClass">
<slot></slot>
</div>
</transition>
</component>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
export default {
props: {
tag: {
type: String,
default: "div"
},
show: {
type: Boolean
},
btnGroup: {
type: Boolean
},
dropup: {
type: Boolean,
default: false
},
dropright: {
type: Boolean,
default: false
},
dropleft: {
type: Boolean,
default: false
},
split: {
type: Boolean,
default: false
},
megaMenu: {
type: Boolean
}
},
data() {
return {
toggle: false
};
},
mixins: [clickaway],
methods: {
away() {
this.toggle = false;
console.log("away");
},
enter(el) {
el.style.opacity = 0;
},
afterEnter(el) {
el.style.opacity = 1;
},
beforeLeave(el) {
el.style.opacity = 0;
},
handleToggle(e) {
console.log("click on toggle");
this.toggle=true;
e.preventDefault();
}
},
computed: {
className() {
return classNames(
this.btnGroup ? 'btn-group' : 'dropdown',
this.show && 'show',
this.dropup && 'dropup',
this.dropright && 'dropright',
this.dropleft && 'dropleft',
this.megaMenu && 'mega-dropdown'
);
},
style() {
return {
'margin-left' : this.split && '-0.3rem'
};
},
collapseClass() {
return classNames(
this.megaMenu ? 'mega-menu-collapse-item' : 'collapse-item'
);
}
}
};
</script>
Thanks for helping
Mikołaj Smoleński staff answered 6 years ago
Hi there,
Dropdown was created to be a list of links. After clicking on of them You should be linked to another page or another page section. You can make it by adding href attribute to each mdb-dropdown-item. If You'd like to get values or other interactions with input please use our mdb-select component.
As I checked, clicking on mdb-dropdown-item each time points to it's href directory.
Best Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.6.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No