Vue中如何监听元素启用/禁用状态触发onEnabled/onDisabled事件？

Vuetify的<v-checkbox>组件没有内置onDisabled或onEnabled这类事件，你需要自己实现状态变化的监听逻辑，下面是两种实用的实现方式：

方法一：用watch监听禁用状态值 #

先把expression(layout.enableIf)的结果转为响应式的计算属性，再通过watch监听其变化：

示例代码 #

<template>
  <v-checkbox 
    :value="getValue(layout.responseNode)" 
    @change="setValue(layout.responseNode, $event)" 
    :label="expression(layout.label)" 
    :disabled="isDisabled" 
  ></v-checkbox>
</template>

<script>
export default {
  computed: {
    isDisabled() {
      // 实时计算当前禁用状态
      return this.expression(this.layout.enableIf)
    }
  },
  watch: {
    isDisabled(newState, oldState) {
      if (newState !== oldState) {
        if (newState) {
          // 切换为禁用状态时执行对应命令
          this.expression(this.layout.disableCommand)
        } else {
          // 切换为启用状态时的逻辑（按需添加）
          // this.expression(this.layout.enableCommand)
        }
      }
    }
  },
  mounted() {
    // 页面初始化时如果已是禁用状态，直接执行一次逻辑
    if (this.isDisabled) {
      this.expression(this.layout.disableCommand)
    }
  }
}
</script>

如果layout是异步获取的，computed会自动响应layout的变化，无需额外处理。

方法二：自定义指令复用监听逻辑 #

如果多个组件都需要这个功能，可以写一个自定义指令来监听disabled属性的变化：

注册自定义指令 #

// 在项目入口文件（如main.js）中注册
Vue.directive('disabled-state', {
  bind(el, binding) {
    // 初始化时检查状态并执行对应逻辑
    if (binding.value.isDisabled) {
      binding.value.onDisabled()
    }
  },
  update(el, binding) {
    // 属性变化时触发对应逻辑
    if (binding.oldValue?.isDisabled !== binding.value.isDisabled) {
      if (binding.value.isDisabled) {
        binding.value.onDisabled()
      } else {
        binding.value.onEnabled?.()
      }
    }
  }
})

在组件中使用 #

<v-checkbox 
  :value="getValue(layout.responseNode)" 
  @change="setValue(layout.responseNode, $event)" 
  :label="expression(layout.label)" 
  :disabled="expression(layout.enableIf)"
  v-disabled-state="{
    isDisabled: expression(layout.enableIf),
    onDisabled: () => this.expression(layout.disableCommand),
    onEnabled: () => this.expression(layout.enableCommand) // 可选的启用逻辑
  }"
></v-checkbox>

注意点 #

• 如果layout.disableCommand是字符串形式的执行命令，要确保expression函数能正确解析并执行它（注意使用eval的安全风险，建议提前将命令转为可执行函数）。
• 若layout数据是异步加载的，要保证指令或watch在数据加载完成后才生效。

内容的提问来源于stack exchange，提问作者Binesh Nambiar C