QInput with type="number" not automatically typecast?

[jimmiejackson414]

I have a component I'm creating for inline-editing of text. One kind of edge issue I'm running into is that if the text being edited needs to be a Number, the v-model on the q-input emits a string version instead of the number, even if the input type is set to "number".

I read on the Vue3 Docs that if an input type is set to number, then the .number modifier is automatically applied, however I can verify that this isn't the case when using QInput.

<template>
  <div
    v-if="!isEditing"
    class="slot-text"
    :style="slotStyles"
    @trigger="toggleEditing"
    @click="toggleEditing(true)"
    @keydown="toggleEditing(true)">
    <slot />
    <q-icon
      v-if="!hideEditBtn"
      flat
      round
      text-color="text"
      size="1rem"
      name="bi-pencil-fill"
      class="q-ml-md" />
  </div>
  <q-input
    v-else
    ref="target"
    v-model="model[field]"
    v-on-click-outside="() => toggleEditing(false)"
    :type="type"
    outlined
    dense
    :style="inputStyles"
    @keyup.escape="handleEscape"
    @keyup.enter="handleEmit"
    @keyup.tab="handleEmit"
    @blur="handleEmit" />
</template>

<script lang='ts' setup>
  import { nextTick, onMounted, ref } from 'vue';
  import { QInputProps } from 'quasar';
  import { vOnClickOutside } from '@vueuse/components';

  // define props
  interface Props {
    model: any;
    field: string;
    hideEditBtn?: boolean;
    type?: QInputProps['type'];
    slotStyles?: any;
    inputStyles?: any;
  }

  const props = withDefaults(defineProps<Props>(), {
    type: 'text',
    model: null,
    field: '',
    hideEditBtn: false,
    slotStyles: undefined,
    inputStyles: undefined,
  });

  // define emits
  const emit = defineEmits(['handleUpdate']);

  // define local state
  const isEditing = ref(false);
  const model = ref(null);
  const type = ref(props.type || 'text');
  const target = ref<any>(null);

  const toggleEditing = (val: boolean) => {
    isEditing.value = val;
    if (isEditing.value) {
      nextTick(() => {
        target.value!.focus();
      });
    }
  };

  const handleEmit = () => {
    toggleEditing(false);

    // works, but not pretty
    if (props.field === 'quantity') {
      (model.value as any)!.quantity = Number((model.value as any).quantity);
    }

    emit('handleUpdate', model.value);
  };

  const handleEscape = () => {
    model.value = props.model;
    isEditing.value = false;
  };

  onMounted(() => {
    model.value = props.model;
  });
</script>

In my initial tests, I can see that when the input is first rendered, the modelValue is set to the number 6. However, if I try to change that number to say a 3, it is a String 3.

Is this a bug I've discovered, or something small I'm overlooking?

[mmaslarova]

The link provided is from the Vue documentation and the example they provide is when using the native element directly.

Quasar, on the other hand, seems to require the .number modifier on the QInput component.
Please also refer to:

• https://quasar.dev/vue-components/input#input-of-number-type
• [V1] QInput type="number" returns string instead of number for model #3924 (comment)

[Divensky]

In my experience, a number input in Quasar returns a string only when it is an empty string for a blank input. See a demo here:
https://github.com/divensky/quasar-inputs

The explanation for the empty string is based on this data in the Vue docs: "If the value cannot be parsed with parseFloat(), then the original value is used instead." ParseFloat() returns NaN when the input is blank. The original value returned by the browser is an empty string. That's how you get a string value in a number input.

Other values in this input are numeric in my observation.

[rstoenescu]

The .number modifier is applied only to native input elements, not to components.
Correct way:

<q-input v-model.number="variable" type="number"