InputNumber v-model not updating on @input

[Sun3]

I am using PrimeView 3 (version 3.1.2) with Vue 3 and the v-model is not being updated on @input as the user is typing in the numbers.

HTML purchasePrice original value is 100,000:

<InputNumber v-model="purchasePrice" @input="calculateValues()" />
{{ purchasePrice }}

Script:

function calculateValues() {
  console.log('calculateValues - purchasePrice', purchasePrice)
}

Log: As you type in the numbers 125,000 the result is still the original value of 100,000 not 125,000:

calculateValues - purchasePrice 100,000

Any ideas on why it's not working? It seems the v-model is not being updated.

Thank you

[cagataycivici]

I think this is on purpose due to nature of the component, @mertsincan can you please comment.

[Sun3]

If it's done on purpose I would like to request a way to enable the functionality, perhaps by a setting. Otherwise when you use the InputNumber with other controls that require the v-model field value to calculate financials will not work.

Example:
InputNumber 1 - User enters 100,000 but other controls on the page that require this number for calculations will not be updated since the v-model value is not being updated.

Thanks.

[mertsincan]

Hi,

Please see this enhancement;
#506
As I said in the link above, the model cannot be updated with the @input event. For this issue, you can use event.value.

function calculateValues(event) { // event = { originalEvent: event, value: newValue }
  console.log('calculateValues - purchasePrice', event.value);
}

[usamekilicbay]

You could've added a lazy/eager option for that though. Just because of this missing simple feature I have to change the whole component library now, my project is entirely based on this functionality.

[james-astra]

You could've added a lazy/eager option for that though. Just because of this missing simple feature I have to change the whole component library now, my project is entirely based on this functionality.

Yes, it's really annoying.

[james-astra]

You could've added a lazy/eager option for that though. Just because of this missing simple feature I have to change the whole component library now, my project is entirely based on this functionality.

Here is a temporary fix I have found myself using via the keyup event. Not tested in any way, just suitable for my simple input but perhaps not all hope is lost.

<InputNumber
    @keyup="(e) => radiusM = parseInt(e.srcElement?.ariaValueNow) || 0"
    v-model.number="radiusM"
    id="radiusM"
    placeholder="100"
    :invalid="!!errors?.radiusM"
    class="w-full"
    suffix="m"
    :min="20"
    :max="100000"
    show-buttons
></InputNumber>

I think that an option for lazy updating of the model on change is really necessary, not sure who to tag to bring attention to it.