Vuetify v-text-field(type="number")：清空后设为null而非空字符串

我之前也碰到过一模一样的问题，Vuetify确实没有内置类似:clear-value="null"的属性，但有几个实用的办法能实现你要的效果：

• 使用计算属性做双向绑定（推荐，符合Vue最佳实践）
  通过计算属性的get和set方法，在值被清空为空字符串时自动转换成null：

  <template>
    <v-text-field
      type="number"
      v-model="formattedNumber"
    ></v-text-field>
  </template>
  
  <script>
  export default {
    data() {
      return {
        originalNumber: null // 这里存储最终需要的null值
      }
    },
    computed: {
      formattedNumber: {
        get() {
          return this.originalNumber;
        },
        set(val) {
          // 输入为空字符串时赋值为null，否则保留原输入
          this.originalNumber = val === '' ? null : val;
        }
      }
    }
  }
  </script>
  

• 监听值的变化
  用Vue的watch监听输入值，一旦检测到空字符串就替换成null：

  <script>
  export default {
    data() {
      return {
        numberValue: null
      }
    },
    watch: {
      numberValue(newVal) {
        if (newVal === '') {
          this.numberValue = null;
        }
      }
    }
  }
  </script>
  

• 绑定input事件实时处理
  直接在输入框上绑定@input事件，实时处理输入值：

  <template>
    <v-text-field
      type="number"
      v-model="numberValue"
      @input="handleNumberInput"
    ></v-text-field>
  </template>
  
  <script>
  export default {
    data() {
      return {
        numberValue: null
      }
    },
    methods: {
      handleNumberInput(val) {
        if (val === '') {
          this.numberValue = null;
        }
      }
    }
  }
  </script>
  

个人最推荐计算属性的方式，它把值转换的逻辑封装得很干净，不会和其他业务代码混在一起，维护起来也更方便。

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