如何在点击 radio-button-group 里面的 button 的时候,绑定一个 click event,在这个 click event 里面辨别出当前点击的是否是「已经选中」的按钮?

2022-01-29 14:19:07 +08:00
 movq

我把一个 ref 对象 focus = ref<number>(0)绑定到 radio-button-group

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

然后给 focus 添加一个 watch ,如果 focus 改变(也就是说我点击了一个不同的按钮),那么就执行A

watch(focus, () => {
        A(focus' value)
  })

我想在点击之前已经点击过的按钮的时候,也执行A

但是如果点击之前已经点击过的按钮,因为 focus 没有变,所以不会触发 watch

如果我给每个 button 都添加这样一个 click event

if(clickedSameButton)
then A(focus' value) 

但是if(clickedSameButton这个该怎么实现呢?

如果给所有的 button 都添加这样一个 click event

if(clickedButton)
then A(focus' value) 

这是没用的,因为,在进入这个 click event 的时候,focus 的值,无法保证是点击修改后的,还是点击之前的。原因是 js 的异步执行。

比如我本来是按钮 1 ,现在点击按钮 2 ,在

if(clickedButton)
then A(focus' value`focus' value`) 

这个函数里面,focus' value到底是 1 还是 2 呢?无法确定

1156 次点击
所在节点    程序员
2 条回复
gauzung
2022-01-29 14:59:50 +08:00
在 group 的 mounted 阶段 addEventListener 一个 click 监听,判断 e.target 为 button 实例 && 该 button 上挂的 checked 属性是否为 true
我是用 react 的写法来分析,这样能处理 vue 吗
initd
2022-01-29 23:26:12 +08:00
添加一个状态值, 按钮添加 key , 点击时判断 key 是否等于状态值。不要在 focus 这种 CSS 属性上做判定,很不标准。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/831270

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX