CODEWITHSUNDEEP
javascriptvue.js
Cesar Henrique Damascena
Cesar Henrique Damascena

Reputation: 241

Vue SPA overrides dropdown

I'm building a, SPA with Vue JS, and I'm having some problems with my Sidebar component. The default functionality of my Dropdown - to open the submenu - is being overridden by Vue. When I click the anchor, the url is being updated as though I was clicking in a route.

I tried to add @click.stop, but it doesn't work.

Sidebar.vue 

<template>
  <div class="sidebar">
    <div class="main-menu">
      <div class="scroll">
        <ul class="list-unstyled">
          <li>
            <a href="#start" data-target="#start" @click.stop>
              <i class="iconsminds-shop-4"></i>
              <span>Dore</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="sub-menu">
      <div class="scroll">
        <ul class="list-unstyled" data-link="start">
          <li>
            <a href="Dore.Start.html">
              <i class="simple-icon-briefcase"></i> Start
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  name: 'Sidebar',
  data () {
    return {

    }
  }
}
</script>

Upvotes: 0

Views: 112

Answers (1)

Veljo Lasn
Veljo Lasn

Reputation: 246

The question is a little ambiguous but if I understood you correctly, you're trying to prevent navigation from happening when you click on the a element?

If this is the case, try the prevent modifier (@click.prevent) instead of @click.stop as the latter will stop the event from propagating to parents, rather than preventing the default behaviour.

Docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Upvotes: 1

Related Questions