V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
movq
V2EX  ›  程序员

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

  •  
  •   movq · 2022-01-29 14:19:07 +08:00 · 1156 次点击
    这是一个创建于 1033 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我把一个 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 呢?无法确定

    2 条回复    2022-01-29 23:26:12 +08:00
    gauzung
        1
    gauzung  
       2022-01-29 14:59:50 +08:00
    在 group 的 mounted 阶段 addEventListener 一个 click 监听,判断 e.target 为 button 实例 && 该 button 上挂的 checked 属性是否为 true
    我是用 react 的写法来分析,这样能处理 vue 吗
    initd
        2
    initd  
       2022-01-29 23:26:12 +08:00
    添加一个状态值, 按钮添加 key , 点击时判断 key 是否等于状态值。不要在 focus 这种 CSS 属性上做判定,很不标准。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6023 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:11 · PVG 10:11 · LAX 18:11 · JFK 21:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.