Vuetify - v-text-field (type="number") - 设置 null 而不是空字符串

Question

我遇到一个问题，即v-text-fieldattrtype="number"在手动清除后将其值设置为空字符串。null在这种情况下我需要它返回。

有没有类似的属性:clear-value="null"？

我在文档中找不到任何内容：https ://vuetifyjs.com/en/api/v-text-field/#props

Answer 1

鉴于 v-model 是组合 v-bind:value 和 v-on:input 的简写，我能想到的最佳解决方法是将 v-model 拆分为单独的 v-bind:value 和 v-on:input 属性。

对于 v-on:input 属性，我们可以将值强制为 null。

因此，给定一个像这样的现有字段：

<v-text-field 
  type="number"
  v-model="myValue"
></v-text-field>

可以改成这样：

<v-text-field
  type="number" 
  :value="myValue" 
  @input="myValue = $event !== '' ? $event : null"
></v-text-field>

Answer 2

您可以使用@click:clear事件...

   v-text-field
    v-model="myValue"
    clearable
    @click:clear="setItNull()"
    type="number">
   </v-text-field>

将其绑定到将值设置为 null 的方法...

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            myValue: 1
        }
    },
    methods: {
      setItNull () {
          this.myValue === null
      },
    },
})

演示