Dropdown is not working in Vue js

Topic: Dropdown is not working in Vue js

guru93 free asked 6 years ago

I'm trying to use Dropdown in vue js. But it's not working kindly provide me a solution.

    <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button>
    <div class="dropdown-menu">
    <input type="search" placeholder=""search>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
    </div>
    </div>

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi @cflores,

Could you please share your setup and what exactly can we do to reproduce the issue? Not able to do so by just setting up a new cli project and following the 5-minutes quick start guide.

Best,
Kuba

cflores free commented 6 years ago

Hey Kuba, I don't believe this is an issue with mdbvue, but I believe that it occurrs whenever you are integrating into a project with webpack. There's probably more setup in the eslint files that I'm not aware of that needs to take place. I get the following in the console for dropdowns:
```webpack-internal:///2:592 [Vue warn]: Unknown custom element: <mdb-dropdown> - did you register the component correctly? For recursive components, make sure to provide the "name" option.```
I am using "webpack": "^3.6.0"
'I'm believe that I'm including the component correctly, and have no issues with any other component besides dropdowns.
```

import {Container, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem, Tbl, TblHead, TblBody} from 'mdbvue'

import store from '../vuex'

export default {

name: 'WorkOrders',

components: {

Container,

mdbDropdown,

mdbDropdownToggle,

mdbDropdownMenu,

mdbDropdownItem,

Tbl,

TblHead,

TblBody

},
```
Any help you can give would be great. Let me know what further information you need from me. Thanks!

<p>Hey Kuba, I don't believe this is an issue with mdbvue, but I believe that it occurrs whenever you are integrating into a project with webpack.  There's probably more setup in the eslint files that I'm not aware of that needs to take place.  I get the following in the console for dropdowns:<br />```webpack-internal:///2:592 [Vue warn]: Unknown custom element: <mdb-dropdown> - did you register the component correctly? For recursive components, make sure to provide the "name" option.```<br />I am using "webpack": "^3.6.0"<br />'I'm believe that I'm including the component correctly, and have no issues with any other component besides dropdowns.  <br />```</p><div><div>import {Container, mdbDropdown, mdbDropdownToggle, mdbDropdownMenu, mdbDropdownItem, Tbl, TblHead, TblBody} from 'mdbvue'</div><div>import store from '../vuex'</div><div>export default {</div><div>name: 'WorkOrders',</div><div>components: {</div><div>Container,</div><div>mdbDropdown,</div><div>mdbDropdownToggle,</div><div>mdbDropdownMenu,</div><div>mdbDropdownItem,</div><div>Tbl,</div><div>TblHead,</div><div>TblBody</div><div>},<br />```<br />Any help you can give would be great.  Let me know what further information you need from me.  Thanks!</div></div>

Please insert min. 15 characters.

Jakub Strebeyko staff commented 6 years ago

Hi,

I'm here to help! Firstly, to pin-point the problem and put forth possible solutions, it would be great to replay the issue elsewhere. It was not achieved using standard vue-cli scaffolding and it's webpack setup here, so it seems totally reasonable to have to do with custom webpack config being used.

I see two alternatives - you could either try to dismantle the setup on your end and identify with/without what it works/does not work or maybe you could share the config here and I could try to cook up a simple project using it and mdbvue and see what happens.

I am staying open for other suggestions as well, so don't hesitate to speak your mind.

Cheers,
Kuba

Please insert min. 15 characters.

cflores free commented 6 years ago

This is the repo for the starter project: https://github.com/Valmoz/gae-vue-webapp2-starter . Using this, I believe you should be able to replicate the issues. Thanks!

Jakub Strebeyko staff commented 6 years ago

Hi there @cflores ,

Thanks for sharing the code, made the whole thing super easy.

Had a problem installing the backend - dev_appserver.py: command not found
Except for that, it seems that the problem lies in an outdated version of "vue-loader": "^11.1.4" (https://github.com/Valmoz/gae-vue-flask-starter/blob/master/app/package.json#L53) - it does not handle named exports in .vue files properly.

It has been fixed in v13.6 - updating it manually or through npm update vue-loader with proper version (package.json "vue-loader": "^13.6.0"), deleting your /node_modules directory (just to be sure) and installing the dependencies anew solved the issue on my end.

Remember to add the styles, though! as per quick start existing project instructions here - https://mdbootstrap.com/docs/vue/getting-started/quick-start/
Let me know whether it helped!

Sending love and all,
Kuba

<p>Hi there <a href="/profile/?id=44468" rel="nofollow">@cflores</a> ,<br /><br />Thanks for sharing the code, made the whole thing super easy.</p><p>Had a problem installing the backend - dev_appserver.py: command not found<br />Except for that, it seems that the problem lies in an outdated version of <span class="pl-s"><span class="pl-pds">"</span>vue-loader<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>^11.1.4<span class="pl-pds">" (https://github.com/Valmoz/gae-vue-flask-starter/blob/master/app/package.json#L53) - it does not handle named exports in .vue files properly.<br /><br />It has been fixed in v13.6 - updating it manually or through npm update vue-loader with proper version (package.json "vue-loader": </span></span>"^13.6.0"), deleting your /node_modules directory (just to be sure) and installing the dependencies anew solved the issue on my end.<br /><br />Remember to add the styles, though! as per quick start existing project instructions here - https://mdbootstrap.com/docs/vue/getting-started/quick-start/<br />Let me know whether it helped!<br /><br />Sending love and all,<br />Kuba</p>

Please insert min. 15 characters.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there guru93, Thanks for reaching out! I will try be as kind as I can - your dropdown is not working most probably because the snippet was copied from our jQuery documentation. The sought code for a MDB Vue dropdown can be found here. With Best Regards, Kuba

guru93 free commented 6 years ago

Thanks for your Response dude. But still, it's not working could you provide me with any other solution.

Jakub Strebeyko staff commented 6 years ago

Hi, Not sure what other solution can you possibly mean - you copied & pasted from jQuery docs; if you want it to work in a Vue project, simply copy & paste from the Vue docs. If it is still not working, please elaborate about your use-case and include devTools console output, if applicable. Hope it helps. Best, Kuba

guru93 free commented 6 years ago

Hi Kuba, sorry for my late response Kuba as u said I have copied that code and pasted in my vue file but it's not working. Also, I didn't find any issues showing in console log.Hereis the code I have used <pre>Start your code here</pre> <template> <container> <dropdown btn-group> <dropdown-toggle @click.native="toggleDropdown(0)">Basic dropdown</dropdown-toggle> <dropdown-menu v-show="active[0]" class="collapse-item"> <dropdown-item>Action</dropdown-item> <dropdown-item>Another action</dropdown-item> <dropdown-item>Something else here</dropdown-item> <div class="dropdown-divider"></div> <dropdown-item>Separated link</dropdown-item> </dropdown-menu> </dropdown> </container> </template> <script> import { Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbvue'; export default { name: 'DropdownPage', data() { return { active: { 0: false } }; }, components: { Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem }, methods: { toggleDropdown(index) { for (let i = 0; i < Object.keys(this.active).length; i++) { if (index !== i) { this.active[i] = false; } } this.active[index] = !this.active[index]; }, allDropdownsClose(target) { for (let i = 0; i < Object.keys(this.active).length; i++) { this.active[i] = false; } }, onClick(e) { let parent = e.target; let body = document.getElementsByTagName('body')[0]; while (parent !== body) { if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) { return; } parent = parent.parentNode; } this.allDropdownsClose(e.target); } }, mounted() { document.addEventListener('click', this.onClick); }, destroyed() { document.removeEventListener('click', this.onClick); } }; </script>

export default {
name: 'DropdownPage',
data() {
return {
active: {
0: false
}
};
},
components: {
Container,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
},
methods: {
toggleDropdown(index) {
for (let i = 0; i < Object.keys(this.active).length; i++) {
if (index !== i) {
this.active[i] = false;
}
}
this.active[index] = !this.active[index];
},
allDropdownsClose(target) {
for (let i = 0; i < Object.keys(this.active).length; i++) {
this.active[i] = false;
}
},
onClick(e) {
let parent = e.target;
let body = document.getElementsByTagName('body')[0];
while (parent !== body) {
if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
return;
}
parent = parent.parentNode;
}
this.allDropdownsClose(e.target);
}
},
mounted() {
document.addEventListener('click', this.onClick);
},
destroyed() {
document.removeEventListener('click', this.onClick);
}
};
</script>

Please insert min. 15 characters.

Jakub Strebeyko staff commented 6 years ago

Hi there Guru-san, Once I got rid of obvious indentation issues, the code worked like a charm, producing a pleasing button with a nifty drop-down functionality. Are you sure you have a well-configured Vue project there, where mdbvue is a module? How did you add it there? Best, Kuba

guru93 free commented 6 years ago

Hi Kuba, I am new to vue.js I don't know what exactly you are asking, can you brief me on what I have to check?

Jakub Strebeyko staff commented 6 years ago

Hi there, Please follow our 5 min start with Vue guide. There's the step-by-step instruction to follow to have the package work whether you are using it as a stand-alone or a supporting library in an already-existent project. It could also help us identify the issue you are having - let me know where down the path did something go wrong and report back! ;) Best, Kuba

cflores free commented 6 years ago

I've been struggling with this as well for a while. As far as I'm able to tell, this is a problem that is seen not in the demo project, but when you are downloading using npm as described in the 5 minute start (https://mdbootstrap.com/docs/vue/getting-started/quick-start/ - existing project section). The only way I've found to fix this so far is having to go into the node_modules/mdbvue/src/index.js and change the lines that say "let Dropdown = require('./components/Dropdown').default" to "import Dropdown, { mdbDropdown } from './components/Dropdown';" I've asked this question before, but is there a better way to go about fixing this without having to modify the base files?

Please insert min. 15 characters.

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB Vue
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

guru93

0Support score
5Questions 0Answers 0Snippets