Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rlam3 opened this issue Oct 5, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@rlam3
Copy link

commented Oct 5, 2017

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

This comment has been minimized.

Copy link
Member

commented Oct 5, 2017

Hi @rlam3

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

@Atinux Atinux closed this Oct 5, 2017

@Atinux Atinux added the question label Oct 5, 2017

@rlam3

This comment has been minimized.

Copy link
Author

commented Oct 5, 2017

@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

valeriosillari added a commit to valeriosillari/zitronenstrasse that referenced this issue Dec 18, 2017

@harryhazza77

This comment has been minimized.

Copy link

commented Mar 15, 2018

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

@lock

This comment has been minimized.

Copy link

commented Nov 2, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 2, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.