'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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
