Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

242
Views
Vue 3 how to attach a click function to all radio buttons and in the function tell whether I clicked the already selected button?

I have a ref object focus = ref<number>(0) bound to the value of a radio button group.

<radio-button-group v-model="focus">

and I add a watch to the ref object. Whenever the ref object's value changes (i.e. click another button), it triggers event A.

watch(focus, () => {
        A(focus' value)// it should be noted that, at this step,
//focus' value has already changed
  })

However, I want to trigger event A even if I click the already selected button. And in this situation use focus' unchanged value as A parameter.

But when I clicked the already selected button, since the ref object focus's value does not change, it would not trigger the watch.

I think if I attach a func to each radio button, and the func is like

if(clickedSameButton)
then A(focus' value) 

But I don't know how to implement the if(clickedSameButton) condition.

If I just blindly attach func as

if(clickedButton)
then A(focus' value) 

It won't work, since you can not tell whether focus' value is the old value or new value (if you clicked a different button) when the function func executes to the then branch, due to async execution of javascript.

For example, let's say focus' current value is 1, and current selected button is 1, when I click button 2, in the function described above

if(clickedButton)
then A(focus' value) 

You cannot know if 1 or 2 is passed to A

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!