Run two functions on one button click in JS/VueJS

Question

Im trying to run two functions; one being a 'reload page' and the other a 'copy to clipboard'. I have tried all the options on this page:

How to call multiple functions with @click in vue?

but none seem to work for me. Can anyone give me any pointers here? Any help is appreciated.

<button @click="reloadPage(); 
   copytheURL(URLcopyaddress);">Copy</button>



methods: {
    //reloads the page
    reloadPage() {
      window.location.reload();
    },
 //copy to clipboard
    async copytheURL(s) {
      await navigator.clipboard.writeText(s);
      alert("URL Copied!");
    },
},

How about creating another function that calls both functions and use this function on `@click`? — Rajesh, Nov 16 '22 at 09:31

score 0 · Answer 1 · answered Nov 16 '22 at 09:43

0

Why don't you put window.location.reload(); inside the async copytheURL(s)? Right after alert("URL Copied!"); ?

answered Nov 16 '22 at 09:43

Dalibor

31
1
3

That was a really good idea! Unfortunately, it didn't quite work. I think it needs a time delay for the copy the URL. Im going to do a little research. – Nov 16 '22 at 12:18

score 0 · Answer 2 · answered Nov 16 '22 at 09:59

0

The problem is the reloading the page stops the javaScript run. replace the order, call the copy first and you should be fine

answered Nov 16 '22 at 09:59

Yosi Leibman

386
3
16

that's async behavior, so you never can expect the right chronology, wrap that in some promise or so – Yosi Leibman Nov 16 '22 at 10:04
Thank you for your comment. I guessed that was the issue but didnt know how to solve it. – Nov 16 '22 at 12:13
how would I do this exactly? – Nov 16 '22 at 14:56
The easiest will be to call the reload function right after (bellow) the await – Yosi Leibman Nov 20 '22 at 10:19

score 0 · Answer 3 · answered Nov 16 '22 at 10:22

0

Try like this below it will work like magic. The problem with your code is you are trying call both functions in synchronus fashion. But ideally you should wait for the async function to complete and perform your synchronous function.

<button @click="copytheURL(URLcopyaddress).then(reloadPage)">Copy</button>

answered Nov 16 '22 at 10:22

Davidsamuel

36
2

Thanks for your post! This only works if I click it twice. If I swap the functions to read then it does not work. – Nov 16 '22 at 12:12

Run two functions on one button click in JS/VueJS

3 Answers3