Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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