如何通过布尔属性切换Vuetify文本框的input与change事件？

当然有更简洁的实现方式！不用重复写两个<v-text-field>组件，我们可以利用Vue的动态事件绑定特性，只用一个组件就能根据布尔属性切换绑定的事件类型。

核心思路 #

Vue支持通过对象语法绑定事件（v-on或@的对象写法），我们可以根据fireInputOnEachInput的值，动态决定是绑定input事件还是change事件到updateValue方法。

基础实现代码 #

首先是模板部分，只需要一个<v-text-field>组件：

<v-text-field 
  :value="value" 
  label="Textfield" 
  v-on="fireInputOnEachInput ? { input: updateValue } : { change: updateValue }"
></v-text-field>

然后修正Vue实例里的updateValue方法（注意原代码里的赋值错误，需要接收事件传递的新值）：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      value: 'abc',
      fireInputOnEachInput: true // 默认开启实时触发input事件
    };
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue;
    }
  }
})

进阶优化：用计算属性简化模板 #

如果觉得模板里的三元表达式有点冗长，可以把事件绑定逻辑抽到计算属性里，让模板更清爽：

// 在Vue实例的computed中添加
computed: {
  textFieldEvents() {
    return this.fireInputOnEachInput 
      ? { input: this.updateValue } 
      : { change: this.updateValue };
  }
}

然后模板里直接使用：

<v-text-field 
  :value="value" 
  label="Textfield" 
  v-on="textFieldEvents"
></v-text-field>

为什么这个方案更好？ #

• 避免了重复的组件代码，减少冗余，维护起来更方便
• 逻辑集中，切换事件的规则清晰可见
• 完全符合Vue的响应式特性，属性变化时事件绑定会自动更新

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