0

I need to attach an onClick="" event to a Vue component. I am aware that I can use @click="", but since this div is later going to be cloned (I am using a slider library that clones the divs). I cannot use @click="", since the original event handler will not be cloned (apparently this is not possible).

How can I use a vanilla onClick event handler inside a component, while also referring to the component's method? Usually I'd write:

<a href="#" @click="nextSlide()">

But I cannot use:

<a href="#" onClick="this.nextSlide()">

Since "nextSlide" will then not be defined.

tony19
  • 125,647
  • 18
  • 229
  • 307
FooBar
  • 5,752
  • 10
  • 44
  • 93
  • 1
    How are you cloning the element? If vue clones the element, then vue could also establish the `@click` on the cloned element – Taplar Feb 19 '20 at 18:40
  • 1
    could you share some code so we can see your cloning implementation? – Hamed Baatour Feb 19 '20 at 18:42
  • The link you included shows that all event handlers (including native ones) would not be cloned, so access to the component method from the native handler wouldn't help. – tony19 Feb 19 '20 at 19:38
  • I ended up assigning the click even register on the mounted method. I am not cloning the contents, but the slider library I am using is: https://pawelgrzybek.github.io/siema/ – FooBar Feb 20 '20 at 09:19
  • @tony19 and by the way, yes, because onClick is an HTML attribute and that would be cloned. – FooBar Feb 20 '20 at 17:09

0 Answers0