Topic: Binding router to mdb-dropdown-item

Rogelio Sanchez free asked 3 years ago


How can I properly bind the internal vue router to a mdb-dropdown-item,

Link

router-to properties are not working,

if I put href="/mylink" it works, but it reloads the whole page, I want to use the internal vue router.

Thanks in advance!


Magdalena Dembna staff answered 3 years ago


Hi, I've just realized that your problem is probably caused by MDB Vue version. A router-link functionality was introduced in MDB Vue 5.2.0, so in order to use it, you need to update your version. Kind regards, Magdalena


Rogelio Sanchez free commented 3 years ago

Thank you so much Miss Dembna, Upgrading did the job.


Magdalena Dembna staff commented 3 years ago

I'm glad we could help, good luck with your project. Best regards, Magdalena


Nirav Parekh free answered 3 years ago


Hi, I'm trying to give generate the link like

http:localhost:8080/profile/{id}

where {id} is dynamic.

My base url is: http:localhost:8080

I tried using following html

<mdb-dropdown-item :to="'profile/' + user.profile.user_id">Profile</mdb-dropdown-item>

When I'm in other page, it works fine. but when I'm in already in profile page, it generates link like this:

http://localhost:8080/profile/profile/{id}

Magdalena Dembna staff commented 3 years ago

Have you tried using computed property for your link?


Rogelio Sanchez free answered 3 years ago


Yeah, sorry.these are my dropdown items

dropdown items

I tried to put router to="/" properties directly into the dropdown item,However it behaves like it had href="#", even If I put the "router" property.

void

I also tried to wrap dropdown items inside a router-link elemen and it workst, But it causes some strange margin or padding to the element.

enter image description here

Thanks a lot for your support.


Magdalena Dembna staff answered 3 years ago


Hi, Can you please provide a code snippet? I tested the code below and it seems to work fine, so I would be easier to find the source of the problem If you shared your example. Kind regards, Magdalena

<mdb-dropdown>
    <mdb-dropdown-toggle color="default" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
    <mdb-dropdown-menu>
        <mdb-dropdown-item to="/some-path">Action</mdb-dropdown-item>
    </mdb-dropdown-menu>
</mdb-dropdown>


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

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Mac
  • Browser: Google Chrome
  • OS: macOs High Sierra
  • Provided sample code: No
  • Provided link: No