Vue3动态绑定class方法时无法获取按钮data属性问题求助

$event是Vue仅在事件绑定回调上下文中提供的内置变量，仅在@click、@input这类事件触发时才会指向对应的事件对象。在:class这类普通属性动态绑定的表达式中调用方法传$event时，当前执行上下文不存在这个变量，因此传入方法的参数为undefined。
属性绑定逻辑在组件渲染阶段就会执行，此时没有任何用户交互事件触发，本身也不可能获取到事件对象。

• 优先使用直接传值方案（Vue推荐写法，完全避免冗余DOM操作）
  模板中已经可以直接拿到服务端渲染的value值，不需要等DOM渲染完成后再读取data-value属性，直接把这个值作为参数传给class计算方法即可。
  修改模板的class绑定部分：

  <div class="two columns">
    <button 
      data-value='{{ value }}'
      class="button-selection"
      <!-- 直接传入模板已有的value值，不需要传$event -->
      :class="selectionButtonClass(value)"
      @click="selectionButton($event)" 
    >
      <span class="text">{{ value }}</span>
    </button>
  </div>
  

  对应方法中直接接收参数做判断，返回需要的class名即可：

  selectionButtonClass(currentValue) {
    // 基于传入的currentValue做逻辑判断，比如匹配选中值返回激活样式
    return currentValue === this.currentSelected ? 'is-active' : ''
  }
  

• 必须读取DOM属性的场景：使用模板ref获取元素
  如果有特殊需求必须操作DOM读取属性（非必要不推荐，优先用传值方案），给目标按钮绑定ref，在方法中通过ref获取DOM实例即可。
  模板给按钮添加ref属性：

  <button 
    ref="selectBtn"
    data-value='{{ value }}'
    class="button-selection"
    :class="selectionButtonClass"
    @click="selectionButton($event)" 
  >
    <span class="text">{{ value }}</span>
  </button>
  

  方法中通过ref读取DOM属性：

  selectionButtonClass() {
    const btnElement = this.$refs.selectBtn
    if (!btnElement) return ''
    const val = btnElement.dataset.value
    // 基于val做判断返回对应class
  }
  

  如果是v-for循环渲染的多个同类按钮，ref会返回DOM数组，需要按索引匹配对应元素

内容的提问来源于stack exchange，提问作者FabricioG