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

Tag in router-link can't register dragenter event listener correctly. #2890

Labels

Comments

@oraant
Copy link

oraant commented Aug 21, 2019

Version

3.0.6

Reproduction link

https://jsfiddle.net/oraant/295s4pob/

Steps to reproduce

HTML:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <p draggable="true" @dragstart.self="drag">Drag Me!!!</p>
  
  <a @drop.self="drop" @dragover.self="dragover">✔️ can register listener correctly</a>
  <router-link tag="div" event="" :to="'www.baidu.com'">
    <a @drop.self="drop" @dragover.self="dragover">❌ can NOT register listener correctly<br></a>  <!-- LOOK AT HERE!!!!!!!!!!! -->
    <a @drop.self.native="drop" @dragover.self.native="dragover">❌ can NOT register listener correctly<br></a>
    <a @drop.native.self="drop" @dragover.native.self="dragover">❌ can NOT register listener correctly<br></a>

    <router-link :to="''" @drop.self="drop" @dragover.self="dragover">❌ can NOT register listener correctly<br></router-link>
    <router-link :to="''" @drop.self.native="drop" @dragover.self.native="dragover">✔️ can register listener correctly<br></router-link>
    <router-link :to="''" @drop.native.self="drop" @dragover.native.self="dragover">✔️ can register listener correctly<br></router-link>
  </router-link>
  
  <p>Drop Count: <b>{{ count }}</b></p>
</div>

JS:

const router = new VueRouter()

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    count: 0,
  },
  methods: {
    drag: function(ev){
      console.log('ev.target.id');
    },
    drop: function(ev){
      ev.preventDefault();
      this.count  = 1;
    },
    dragover: function(ev){
      ev.preventDefault();
    },
  },
  router,
})

What is expected?

hope the <a> tag in <router-link> can register listener correctly, without modifying it to <router-link>.

What is actually happening?

it on the steps.

@posva
Copy link
Member

posva commented Aug 21, 2019

I took a look and the only one not working is the a inside the router-link. Keep in mind, you can only nest one a, and definitely not nest router-link between each other, unless you use the v-slot api

Some important notes:

  • don't use .native with elements like a
  • always use .native with components like router-link

Using the v-slot api will temporarily solve your issue:

<router-link v-slot="{ navigate, href }" :to="'/'">
  <div>
    <a @click.prevent="navigate" :href="href" @drop.self="drop" @dragover.self="dragover">works</a>
  </div>
</router-link>

Events are not kept on the a I will fix it and release a patch

@posva posva added the bug label Aug 21, 2019
@posva posva closed this as completed in e0d4dc4 Aug 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment