VueJS: "once" event modifier, check if clicked

Question

I have a simple question that I haven't answered so far.

In VueJS, there is .once event modifier, which can work normally. The problem is that I'm using @click.once on the autocomplete input component to query my database and populate its available items.

What I want to achieve is to provide some kind of additional icon to call the query after clicking the input once.

Because:

• I want to prevent users from spamming click input and making lots of queries
• I want him to be able to refresh the data using a "refresh icon" that will only show up when my input is clicked once (@click.once triggered).

Is there a way to obtain this information?

Thanks in advance!

Answer 1

I think you should create a state (data) that is set to false and when the button is clicked it changes to false. Then conditionally display the refresh icon with the set value. Click Refresh to reset the value to false.