Nuxt.js: How do we v-on:click nuxt-link?

[rlam3]

How do we v-on:click nuxt-link?

I've been trying to toggle a click on a nuxt-link but seems like nothing is working...

_{This question is available on Nuxt.js community (#c1602)}

[Atinux]

Hi @rlam3

Same as router-link, you need to use v-on:click.native (https://github.com/vuejs/vue-router/issues/800)

[rlam3]

@Atinux Seems like I had to do the following:

<template>

  <header>
    <nav>
      <input type="checkbox" id="nav" class="hidden"/>
      <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
      <div class="nav-container">
        <ul>
          <li @click="toggleMenu" ><a href="#"><i class="fa fa-phone-square fa-1x"></i> 847.228.7733</a></li>
          <li @click="toggleMenu" ><nuxt-link to="/">Home</nuxt-link></li>
          <li @click="toggleMenu" ><nuxt-link to="/about">About</nuxt-link></li>
          <li @click="toggleMenu" ><nuxt-link to="/menu">Menu</nuxt-link></li>
          <li @click="toggleMenu" ><nuxt-link to="/orderOnline">Order Online</nuxt-link></li>
        </ul>
      </div>
    </nav>
  </header>

</template>

Instead of:

<template>

  <header>
    <nav>
      <input type="checkbox" id="nav" class="hidden"/>
      <label for="nav" class="nav-open"><i></i><i></i><i></i></label>
      <div class="nav-container">
        <ul>
          <li  ><a href="#" @click="toggleMenu" ><i class="fa fa-phone-square fa-1x"></i> 847.228.7733</a></li>
          <li  ><nuxt-link  @click="toggleMenu" to="/">Home</nuxt-link></li>
          <li  ><nuxt-link  @click="toggleMenu" to="/about">About</nuxt-link></li>
          <li  ><nuxt-link  @click="toggleMenu" to="/menu">Menu</nuxt-link></li>
          <li  ><nuxt-link  @click="toggleMenu" to="/orderOnline">Order Online</nuxt-link></li>
        </ul>
      </div>
    </nav>
  </header>

</template>

For my nav bar to work properly in ....
I created a repo for this....
https://github.com/rlam3/nuxt-header-bug

[harryhazza77]

@click.native="handler" in the nuxt-link works for me

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.