@ionic/vue bug: add v-model support when using refs

[DieOver]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
v-model not set value correctly

Expected behavior:
v-model set value correctly

Steps to reproduce:
Just insert a ion-input with v-model and put de reactive variable with ref

Related code:

<template>
  <ion-page>
    <ion-content>
      <ion-input v-model="inputValueRef"></ion-input>
      Value: {{ inputValueRef }}
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonInput } from "@ionic/vue";
import { ref } from "vue";

export default {
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonInput,
  },
  setup() {
    const inputValueRef = ref("");
    return { inputValueRef };
  },
};
</script>

Ionic info:

Ionic:

   Ionic CLI       : 6.11.8-testing.0 (/Users/lennon/.nvm/versions/node/v14.9.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 0.3.1

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.1.0) : 1.0.0

System:

   NodeJS : v14.9.0 (/Users/lennon/.nvm/versions/node/v14.9.0/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[aaronksaunders]

i worked around this issue

 <ion-input @ionChange="($event) => inputValueRef = $event.detail.value" v-model="inputValueRef" />

[DieOver]

@aaronksaunders the workaround is just
<ion-input @ionChange="($event) => inputValueRef = $event.detail.value">

Without the v-model twoWayBind, but will be awesome just type

This is what i related, but thanks for the advice of the workaround, now i can go through...

[Sacrekin]

Will it be fixed to be fully compliant with Vue v-model? Also, the fix proposed above does not seem to work if v-model property is part of a reactive(object).

[liamdebeasi]

Thanks! We have support for a data object with v-model, but we need to update this to add support for using refs.

So doing:

...
data() {
  return { input: '' }
}

would work, but I will ensure we can use refs.

[Sacrekin]

To test it, I am using the test boilerplate used by Max in June 2019 to demo v-model support (adapted to Vue 3 of course).
The June 3rd 2019 source is posted here: https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9
I keep all v-model variables in a reactive(userDataObject). It is not working.

Can you share a version of this app that works using reactive data object?

[liamdebeasi]

As I mentioned in my previous comment we do not have support for this yet, but will be adding it in one of the upcoming betas.

[liamdebeasi]

Thanks for the issue. This has been resolved via #22092, and a fix will be available in an upcoming beta release of Ionic Vue later this week.

[liamdebeasi]

Hi everyone,

This has been released as part of Ionic Vue 0.4.0. Please open a new GitHub issue for any additional bugs you find. Thanks!

Upgrade:

npm i @ionic/vue@0.4.0 @ionic/vue-router@0.4.0

[DieOver]

Hi everyone,

This has been released as part of Ionic Vue 0.4.0. Please open a new GitHub issue for any additional bugs you find. Thanks!

Upgrade:

npm i @ionic/vue@0.4.0 @ionic/vue-router@0.4.0

Perfect, now i can use REFs.. thx!!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.