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

Ask us anything How do I?
1

Hi there,

I use the ww-button template code from this 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

2

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.

3

Hi there,

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

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

And below this:

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

4

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

5

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

6

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

7

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?

8

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

9

This should do what you need.

1 Like
10

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

11

Hi there,

I tried this code after my 10 seconds count:

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

12

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

13

Hi there,

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

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

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

Kind Regards,
Stefan

14

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.

15

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

16

context please

17

Hi there,

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

Thank you.
Stefan

1 Like
18

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

I’m happy that it works now :+1: