Ionic-framework: Vue v-model does not work as expected for ion-input not for ion-datetime

[lguerra10]

Bug Report

When using ionic components in vue with the alpha.13/dist the v-model binding in vue does not update the linked variable when the value in the input field changes.
With the ion-input there is a workaround because you can bind to the input event.
Unluckily the ion-datetime does not fire the input or the change event or any other useful event that you can use to update the value of the linked variable.

I think we need you to emit a change or input event when in the ion-datetime you tap on the Done button

[lassesteffen]

Can confirm this is a problem. Was able to find the workaround for everything but for ion-datetime. Would be pretty cool if we could just use v-model

[lassesteffen]

@lguerra10 did you find a workaround for ion-toggle?

[lguerra10]

No workaround since they do not expose suitable events to bind to. Besides,
the date picker is not my preferred solution. I went to a month widget
where you select the date directly. I used a vue component. Good luck
import VCalendar from "v-calendar";

On Sun, Aug 5, 2018 at 1:28 PM lassesteffen [e-mail]
wrote:

@lguerra10 https://github.com/lguerra10 did you find a workaround for
ion-toggle?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912#issuecomment-410542025,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANGc9v0L9RdMLLqQEpF8G1lLlBivyIvrks5uN0dEgaJpZM4Vk1fG
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[lguerra10]

this works the event to bind is ionInput. Enjoy!

v-model="inputForm.number"
v-bind:value="inputForm.date" name="date"
v-on:ionInput="inputForm.date=$event.target.value"
required>

On Sun, Aug 5, 2018 at 1:47 PM luis guerra [e-mail] wrote:

No workaround since they do not expose suitable events to bind to.
Besides, the date picker is not my preferred solution. I went to a month
widget where you select the date directly. I used a vue component. Good luck
import VCalendar from "v-calendar";

On Sun, Aug 5, 2018 at 1:28 PM lassesteffen [e-mail]
wrote:

@lguerra10 https://github.com/lguerra10 did you find a workaround for
ion-toggle?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912#issuecomment-410542025,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANGc9v0L9RdMLLqQEpF8G1lLlBivyIvrks5uN0dEgaJpZM4Vk1fG
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[alherrera42]

I think the reason it doesnt work is because the v-model is affecting the wrapper (<ion-whatever />), not the component itself or its insides.

As far as I understand the logic of Vue components, the only way for this to work is to broadcast the input change from the component to the parent so it updates the model. And by "it", I mean "you".

Meanwhile, Iguerra10's solution seems to me the only proper way to do this. Also, I don't know if this solution applies to <ion-select> too.

[lguerra10]

I think the problem is that vue binds to standard event names: input,
change, etc
Whereas ionic 4 uses events named ionInput, ionChange, etc
I don't understand why they don't use the standard names for the standard
events

On Thu, Oct 25, 2018 at 11:29 AM Alberto Herrera [e-mail]
wrote:

I think the reason it doesnt work is because the v-model is affecting the
wrapper (), not the component itself or its insides.

As far as I understand the logic of Vue components, the only way for this
to work is to broadcast the input change from the component to the parent
so it updates the model. And by "it", I mean "you".

Meanwhile, Iguerra10's solution seems to me the only proper way to do
this. Also, I don't know if this solution applies to too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912#issuecomment-433137889,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANGc9iSw7HkgxgkQVVh_Tm3d9sro3q6Xks5uofT1gaJpZM4Vk1fG
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[chris-washington]

I think the problem is that vue binds to standard event names: input, change, etc Whereas ionic 4 uses events named ionInput, ionChange, etc I don't understand why they don't use the standard names for the standard events
…
On Thu, Oct 25, 2018 at 11:29 AM Alberto Herrera @.*> wrote: I think the reason it doesnt work is because the v-model is affecting the wrapper (), not the component itself or its insides. As far as I understand the logic of Vue components, the only way for this to work is to broadcast the input change from the component to the parent so it updates the model. And by "it", I mean "you". Meanwhile, Iguerra10's solution seems to me the only proper way to do this. Also, I don't know if this solution applies to too. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14912 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/ANGc9iSw7HkgxgkQVVh_Tm3d9sro3q6Xks5uofT1gaJpZM4Vk1fG .
-- Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

This is only partly the issue. The other issue is that when it is a non standard component, v-bind expects the value to come from a string and not the custom event that is emitted by Web component frameworks.

[mattyforth]

Incase anyone is still struggling with this, this workaround seems to work for me.

<ion-datetime v-bind:value="model" v-bind:ionChange="model = $event.target.value"> </ion-datetime>

[drewjosh]

My workaround for checkboxes and for ion-textarea, what do you think about it? (I am new to Vue and think there is a better workaround..)

ion-checkbox

<ion-checkbox class="concern-checkbox" @ionChange="concernChecked= !concernChecked"></ion-checkbox>

ion-textarea

Might be a bit ugly but after trying & searching for several hours I thought that is ok!

<ion-textarea
        v-bind:value="userConcernDetail"
        v-on:input="handleTextInput(arguments[0].path[0].defaultValue, arguments[0].data)"
      ></ion-textarea>

handleTextInput(textPrevious, newValue) {
      if (!newValue) {
        // user deleted 
        this.userConcernDetail = this.userConcernDetail.slice(
          0,
          this.userConcernDetail.length - 1
        );
      } else {
        this.userConcernDetail = textPrevious + newValue;
      }
    }

[lguerra10]

in the checkbox you are better off like this

v-bind:checked="concern-checkbox"

v-on:click="handleTextInput using the ionChange may give you racing situation

handle in the handleTextInput function the value of the
concern-checkbox variable

in the textArea link to ionInput

v-on:ionInput rather than input

On Sat, May 4, 2019 at 9:29 AM Joshua Christian Drewlow <
[email protected]> wrote:

My workaround for checkboxes and for ion-textarea, what do you think about
it? (I am new to Vue and think there is a better workaround..)
ion-checkbox

ion-textarea

Might be a bit ugly but after trying & searching for several hours I
thought that is ok!

v-bind:value="userConcernDetail"
v-on:input="handleTextInput(userConcernDetail = arguments[0].path[0].defaultValue, arguments[0].data)"

handleTextInput(textPrevious, newValue) {
if (!newValue) {
// user deleted
this.userConcernDetail = this.userConcernDetail.slice(
0,
this.userConcernDetail.length - 1
);
} else {
this.userConcernDetail = textPrevious + newValue;
}
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912#issuecomment-489336675,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADIZZ5V7E4AGSH7MHHPWDC3PTWTWJANCNFSM4FMTK7DA
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[drewjosh]

v-bind:checked="concern-checkbox"

Didnt' work, check box is checked in UI, but variable not updated.

v-on:ionInput rather than input

ionInput didn't call handleTextInput().

handle in the handleTextInput function the value of the
concern-checkbox variable

I want to show the text input ONLY if variable concern- checkbox is checked.

What do you mean with following? (I didn't have a v-on:click):

v-on:click="handleTextInput using the ionChange may give you racing situation

[lguerra10]

You have to update the variable in the @click event function
@click="concernChecked=
!concernChecked"
if you use the @ionChange event you will have a race situation everytime it
changes it fires the event and changes again,

On Mon, May 6, 2019 at 11:06 AM Joshua Christian Drewlow <
[email protected]> wrote:

v-bind:checked="concern-checkbox"

Didnt' work, check box is checked in UI, but variable not updated.

v-on:ionInput rather than input

ionInput didn't call handleTextInput().

handle in the handleTextInput function the value of the
concern-checkbox variable

I want to show the text input ONLY if variable concern- checkbox is
checked.

What do you mean with following? (I didn't have a v-on:click):

v-on:click="handleTextInput using the ionChange may give you racing
situation

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912#issuecomment-489695983,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADIZZ5UFBAOCYJU3RSVHMT3PUBQRJANCNFSM4FMTK7DA
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[mlynch]

Thanks everyone, we're tracking this and will make sure it's working 100% before we leave beta. In the meantime thanks for the workarounds provided above. If you're struggling with this you can achieve it through some of the comments above.

[mlynch]

Hey all, v-model support for Ionic Vue is in pre-release. Interested in testing? Take a look at this gist with some info and an example of the new tag names you'll need to use:

https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9

Once I get some more feedback we can ship it as the next official release.

[alherrera42]

Looks amazing, painless and sharp. Thanks Max.

However, how will the IonInput events will be handled? Same as usual, with
v-on:something?

El lun., 3 jun. 2019 a las 15:43, Max Lynch ([e-mail])
escribió:

Hey all, v-model support for Ionic Vue is in pre-release. Interested in
testing? Take a look at this gist with some info and an example of the new
tag names you'll need to use:

https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9

Once I get some more feedback we can ship it as the next official release.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912?email_source=notifications&email_token=ABYB4QNAIK57BH4WZTRGM5TPYV66DA5CNFSM4FMTK7DKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW2UG7Q#issuecomment-498418558,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABYB4QLCJECEAASUR3WQ6IDPYV66DANCNFSM4FMTK7DA
.

[mezerotm]

For a brief moment, it displays the input fields in the URL bar. I don't think this is desired.
(nvm this was because I surrounded my input fields within a form element, this also caused other related issues. - keeping this here for historical reasons though but you can disregard it)

[smiledev1230]

@mlynch
import { IonInputVue } from "@ionic/vue";

I get this error:
"export 'IonInputVue' was not found in '@ionic/vue'
How to import IonInputVue or other components?

[sotisoti]

Hey all, v-model support for Ionic Vue is in pre-release. Interested in testing? Take a look at this gist with some info and an example of the new tag names you'll need to use:

https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9

Once I get some more feedback we can ship it as the next official release.

Multiple selections is not working yet:

 <IonSelectVue v-model="user.pet" multiple="true">
   <ion-select-option value="cats">Cats</ion-select-option>
   <ion-select-option value="dogs">Dogs</ion-select-option>
 </IonSelectVue>

[kisonay]

Anyone know how was can handle ion-radio-group and ion-radio? I am able to get the value with @ionChange but cannot figure out how to clear/reset the selection.

[lguerra10]

In my experience you are better off using @click='clickHandler' instead of
ionChange event and using the clickHandler to change the value of the
ion-radio.
Hope that helps.

On Sun, Aug 4, 2019 at 3:52 PM kisonay [e-mail] wrote:

Anyone know how was can handle ion-radio-group and ion-radio? I am able to
get the value with @ionChange but cannot figure out how to clear/reset the
selection.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/14912?email_source=notifications&email_token=ADIZZ5S5ZWIFW4SYC2H7BXLQC5MSVA5CNFSM4FMTK7DKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3QLH4A#issuecomment-518042608,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADIZZ5WXBRAPPCVYJZCFOPTQC5MSVANCNFSM4FMTK7DA
.

--
Join me on Vsee video chat. It is free http://vsee.com/u/lpva1m

[kisonay]

In my experience you are better off using @click='clickHandler' instead of ionChange event and using the clickHandler to change the value of the ion-radio. Hope that helps.
…

Thanks lguerra10, I don't have any problems retrieving the value but I can't figure out to reset (unselect the value programmatically)

[Sacrekin]

This worked for me in handling grouped options (side by side in this case)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!