How to trigger an event on an element when we click on another element?

I have a file input and a div in my component. When I click on the

, I need to trigger the click on the file input. How to do this in vue.js?

Probably something like the following
https://jsfiddle.net/f706L1tk/

4 Likes

Thank you @bolerodan…thats works for me

If someone stumbles upon this, this is how I did it (thanks @bolerodan for leading me in the right direction):

When using this.$refs.navbarToggle.click() I get “Uncaught TypeError: this.$refs.navbarToggle.click is not a function”

Changed it to:
this.$refs.navbarToggle.$el.click()

To be clear: “$el” needs to be added for it to work.

1 Like

ok i cheat alittle

i have an example to use directive touch tap to close an object or close a dom element however the method didnt work above… what i did i get the element id which i dynamically bind and pass it to the method to trigger it

for those future likely who will use vue-hammer:
onTap () {
let id = Number(this.$refs.closeicon[0].id)
this.closeFrame(id)
}

Thanks me again

My Approach

 <button @click="$refs.fileInput.click()" class="trigger">Click me</button>
  <input style="display: none;"  type="file" ref="fileInput"/>

https://jsfiddle.net/onhLftwm/

2 Likes

Another option is to simply wrap the elements in a <label> tag: https://jsfiddle.net/jamesbrndwgn/f706L1tk/650/

4 Likes

Thank you guys! You save lives in 2019 xD

this doesnt work for my use case where I need a button to trigger the input

edit: this actually works, dunno what I did wrong back then

Thank you. Nice!

How can I simulate a native event like touchstart? this.$refs.fileInput.touchstart() does not work here.

First, is fileInput a component? If so, you need access the components $el attribute to get to the DOM node. Second, if the event is not triggered by the user, most browsers will block it because of security implications.

1 Like