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

Question

我遇到一个问题，带有type="number"属性的v-text-field在手动清除后将其值设置为空字符串。在这种情况下，我需要它来返回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

当值更改为空字符串时，可以使用watch并监视该值，然后将其替换为null。但是，如果使用"x"按钮清除文本字段，或者手动清空文本字段，则始终返回null。

<v-textfield v-model="myValue" ... />

// script
data() {
return {
myValue: 1
}
},
watch: {
myValue(newVal){
if(newVal === '') {
this.myValue = null;
}
}
}

Answer 3

您可以使用@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
},
},
})

演示