quangquyen1410
commented
11 months ago I've developed a workaround using v-text-field-number to manage and convert numbers. It functions well for basic number fields. However, when this field has a slot, the decimal point ('.') is automatically deleted. Furthermore, the update:model-value event is still activated when I input a decimal point.
This is v-text-field-number component:
<template>
<VTextField
v-bind="$attrs"
:model-value="modelValue"
type="number"
@update:model-value="onUpdateModelValue"
>
<template
v-for="(slot, name) in ($slots as InstanceType<typeof VTextField>['$slots'])"
:key="name"
#[name]="scope"
>
<slot v-if="slot" :name="name" v-bind="scope" />
</template>
</VTextField>
</template>
<script setup lang="ts">
import { VTextField } from 'vuetify/lib/components/index.mjs';
const modelValue = defineModel<number>();
const onUpdateModelValue = (value: string) => {
if (!value) {
modelValue.value = undefined;
return;
}
modelValue.value = Number(value);
};
</script>
JulianPinzaru
Environment
Vuetify Version: 3.3.21 Vue Version: 3.3.4 Browsers: Edge 117.0.2045.60 OS: Windows
Steps to reproduce
Build a form with vee-validate, utilizing the 'useField' function to set up fields with validation and error messages. Wrap the form within a 'v-card' component. Create a v-text-field[type=number] with v-model.number. When entering a decimal number, the dot ('.') will be automatically removed.
Expected Behavior
The period ('.') will be not remove
Actual Behavior
The period ('.') will be automatically removed
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
If you remove the 'error-messages' prop or remove the 'v-card' and 'v-card-text' elements, the form will function as expected. I tested it using Vue DevTools and observed that the update:model-value event is triggered when I type a dot. However, it should not be emitted in this case.