# How manually trigger a click event in Elements (Vue.js)

**URL:** https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155
**Category:** How do I?
**Created:** [September 21, 2022, 4:04pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155 "2022-09-21T16:04:48Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 21, 2022, 4:04pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/1 "2022-09-21T16:04:48Z")

</div>

Hi there,

I use the **ww-button** template code from this Github:

> **[GitHub - weweb-assets/ww-button](https://github.com/weweb-assets/ww-button)**
>
> Contribute to weweb-assets/ww-button development by creating an account on GitHub.

And I added a setInterval, but after the 5 seconds. I want that it manually click on this button.  
I tried this code, but it give me an error:  
`this.$emit('trigger-event', { name: 'click' });`

In the workflow I did place this as execute code:  
`alert("hello clicked here")`  
And manually click do show this alert message.

How can I solve this?

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 21, 2022, 4:58pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/2 "2022-09-21T16:58:35Z")

</div>

A snippet of your code would be useful to help you debug the problem.

Probably you need to use a ref to access the button element `click` method on it.  
Have a look on the vue documentation, search for refs.

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 21, 2022, 5:19pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/3 "2022-09-21T17:19:08Z")

</div>

Hi there,

I use the code of Github. I added this code for “wwElement.vue” file:  
**On the top this:**

```auto
<component
        :is="tag" ref="btnauto"
        class="ww-button"
        :class="{ button: tag }"

```

**And below this:**

```auto
mounted() {
        this.handleObserver();
},
methods: {
        handleObserver() {
            var count = 0;
            function myCount() {
                 count += 1;  
                 if (count >= 3) {
                      clearInterval(timer);
                      // manual trigger the click
                      this.$refs.btnauto.click();
                  }
                  console.log(count);
            }
            var timer = setInterval(myCount,1000);
    
       }
}

```

Is there no way programmatically to call that workflow event in JavaScript that without id/ref of that button?

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)
#### Post date: [September 21, 2022, 5:55pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/4 "2022-09-21T17:55:39Z")

</div>

the built in time delay function on weweb logic won’t do it?

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 21, 2022, 5:58pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/5 "2022-09-21T17:58:47Z")

</div>

Let me see if I understand correctly:  
you want to click the button programmatically from the code inside your custom element, so that in weweb the workflow triggered by the click event will execute. Is this what you want to accomplish?

If it is then instead of clicking the button declare another event in your component and trigger it programmatically. Then in the editor you can create a global workflow and execute it on both the click event and your custom event

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 21, 2022, 6:06pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/6 "2022-09-21T18:06:15Z")

</div>

Hi there,

> Let me see if I understand correctly:  
> you want to click the button programmatically from the code inside your custom element, so that in weweb the workflow triggered by the click event will execute. Is this what you want to accomplish?

Yes. We need a ‘in the box’ solution (for our Elements). So that it only need a drag and drop, with no further adjustments in the weweb panel.

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)
#### Post date: [September 21, 2022, 6:20pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/7 "2022-09-21T18:20:17Z")

</div>

If you can build the workflow inside weweb, you can save the component as a UI kit, and be able to drag and drop the same component anywhere. Can you further help us understand specifically what exactly are you trying to achieve?

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 21, 2022, 6:32pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/8 "2022-09-21T18:32:50Z")

</div>

Hi there,

Yes, I can explain more about the Element I must build. I use the basic of the Github ww-button code, but with a custom CSS design. When this button is visible and created on a web page. The user can click on that button to execute that workflow event (for example _alert(“hello clicked here”)_ or _navigate to another web page_). But if the user do not click on this button within the 10 seconds. It automatically count from 0 to 10. When it reach the count value 10, then it should execute this button action.  
Currently, in my Element code is everything is working. Only I need that manually click action or call that workflow event.

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 21, 2022, 6:46pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/9 "2022-09-21T18:46:20Z")

</div>

> [@dorilama](#):
>
> declare another event in your component and trigger it programmatically

This should do what you need.

---

<div class="post-metadata">

### Author: ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)
#### Post date: [September 21, 2022, 7:07pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/10 "2022-09-21T19:07:22Z")

</div>

put a variable clickedButton = true when button is clicked. Default is false.

on pageload, execute a workflow with time delay 10 secs, then check the variable value, if false execute the button action(which should be another workflow), if true then nothing happens.

that should work

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 22, 2022, 7:41am UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/11 "2022-09-22T07:41:17Z")

</div>

Hi there,

I tried this code after my 10 seconds count:

```auto
this.$emit('trigger-event', { name: 'click', event: { value: "" } });

```

But it give me this error message.  
`Uncaught TypeError: this.$emit is not a function`

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 22, 2022, 10:39am UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/12 "2022-09-22T10:39:03Z")

</div>

Again, without the code I can only guess because you just posted a line without context.

My guess is that you are using that line inside another function therefore `this` is not what you think. [this - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 22, 2022, 11:43am UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/13 "2022-09-22T11:43:51Z")

</div>

Hi there,

Here the full code on this button with the count down timer:

> **[GitHub - sndqapp/auto-close-button: Widget](https://github.com/sndqapp/auto-close-button)**
>
> Widget. Contribute to sndqapp/auto-close-button development by creating an account on GitHub.

And on line 86 it should trigger that button action. You see in the code the many possible code I already tried: [auto-close-button/wwElement.vue at main · sndqapp/auto-close-button · GitHub](https://github.com/sndqapp/auto-close-button/blob/main/src/wwElement.vue#L86)

I am just new in this weweb elements development, so I always learning.

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 22, 2022, 12:09pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/14 "2022-09-22T12:09:48Z")

</div>

Inside your callback function the value of `this` is different.  
Have a look at the previous link to understand why is happening.

An easy solution is to add `const emit = this.$emit` before you add the event listener and call `emit` inside the callback.

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 22, 2022, 12:57pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/15 "2022-09-22T12:57:15Z")

</div>

Hi there,

I tried that idea `const emit = this.$emit` but for `this`. And now I use a new variable `const that = this`. And `that.$refs.btnauto.click();` will execute now well this button.  
Thank you for the suggestion!

Kind Regards,  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 22, 2022, 1:03pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/16 "2022-09-22T13:03:02Z")

</div>

context please

---

<div class="post-metadata">

### Author: ![stefan](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@stefan](https://community.weweb.io/u/stefan)
#### Post date: [September 22, 2022, 1:04pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/17 "2022-09-22T13:04:06Z")

</div>

Hi there,

See update my new version on Github. It works now.

> <https://github.com/sndqapp/auto-close-button/blob/main/src/wwElement.vue#L83>

Thank you.  
Stefan

---

<div class="post-metadata">

### Author: ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)
#### Post date: [September 22, 2022, 1:07pm UTC](https://community.weweb.io/t/how-manually-trigger-a-click-event-in-elements-vue-js/1155/18 "2022-09-22T13:07:54Z")

</div>

> [@stefan](#):
>
> It works now

My bad, I misunderstood.  
I thought it wasn’t working and you were asking another question 😅

I’m happy that it works now 👍
