bug: type="number" is not repected to v-model. String instead of number despite ref<number>

[z0lo13]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

The string is returned to the model instead of the number.

Expected Behavior

The nnumber is returned to the model if type="number".

Steps to Reproduce

<template>
<ion-input type="number" v-model="itemQty" inputmode="numeric"></ion-input>
</template>

<script lang="ts">
export default defineComponent({
setup() {
const qty = ref<number>(1);
watch(qty, (value) => {
      console.log(typeof value)
    })

return {
qty
}
}
})
</script>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.1.0

Capacitor:

Capacitor CLI : 3.4.0
@capacitor/android : 3.4.0
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.0

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v14.17.4 (/usr/local/bin/node)
npm : 8.7.0
OS : macOS Monterey

Additional Information

I have found similar issues on Github but all of them related to Angular and not Vue, also they are 3-4 years old.
The current workaround will be to use watchers and parseFloat the value, however i do not see it is a great workaround as the model updated twice, and the types also not respected so the result could be unexpected

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[z0lo13]

@liamdebeasi
The reproduiction is present, it is 10 second copy paste to any ionic vue project.

[liamdebeasi]

I am unable to reproduce this using the code snippet provided which is why I requested a GitHub repo. Can you please provide a minimal GitHub repo that I can use to verify this behavior?

[z0lo13]

Sure I will create it. Thank you

…

On Apr 25, 2022, 4:10 PM -0400, Liam DeBeasi ***@***.***>, wrote: I am unable to reproduce this using the code snippet provided which is why I requested a GitHub repo. Can you please provide a minimal GitHub repo that I can use to verify this behavior? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[averyjohnston]

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.