V-model doesn't work in ion-textarea

I have two inputs generated dinamically:

this one:

<ion-textarea v-model="form.information[n]" :name="form.information[n]" value="" cols="20" rows="13"></ion-textarea>

and this one:

<ion-input type="text" v-model="form.description[n]" :value="form.description[n]" max="50" min="2"></ion-input>

The ion-textarea doesn’t work, but the ion-input does.

I have both information[] and description[] set in data method.

Why textarea doesn’t work? It returns me an empty value. I tried using the attributes name, value

I found the solution

instead of

<ion-textarea v-model="form.information[n]" :name="form.information[n]" value="" cols="20" rows="13"></ion-textarea>

It is:

<ion-textarea @input="form.information[n]=$event.target.value" cols="20" rows="13'"></ion-textarea>

Although I’m not entrely satisfied as it feels like a bad workaround…I have many inputs and in every single input I have a different way to pass data…ref, @IonChange, v-model, @input

You should not have to do all that as v-model will update automatically. Do you have a GitHub repo with a sample of the app you are building?

Unfortunately, v-model didn’t work. I will provide a repo soon. I might be wrong but I have tried everything that I could possibly do…with value without value, with name without name…everything else is set correctly, the only problem seems to be the way to pass data to the function…like v-model, etc.

So that’s why I was struggling because v-model works for some inputs but not for other inputs…with textarea it didn’t work at all nor with radio inputs.

Radio inputs only work with @IonChange and I had to select a different option, otherwise it wouldn’t pass the value, but I wanted the value to be sent without having to choose any options, just the value of the pre-defined option defined in ion-radio-group, so The only thing that worked was ref and getting the value of the ref in the function like this: this.$refs.accept.value

I am assuming you are looping through the data because of n in form.information[n], right? If it works for ion-input check if (1) ion-text is inside that loop (2) form.information[n] has data (3) form.information[n] is in the same level as form.description[n]… I cant see why v-model shouldnt work in ion-textarea

1 Like

Yes, right. It’s works but not just with v-model, v-model also doesn’t work with other inputs…only with regular ion-input. I will provide a repo soon. It could be the version of my Ionic/Vue but I have everything updated…and no errors in the console.

Ok, so. Here’s the repo. Thank you in advance.

The problem here is that you did not import IonTextarea from @ionic/vue and provide it to your Vue component, so you are not able to use the v-model binding.

If you notice in your browser’s dev tools console, the following warning is there:

[Vue warn]: Failed to resolve component: ion-textarea 

It is a bit confusing since the ion-textarea component does render, but what you are seeing is the regular Web Component, which does not have any Vue support. By importing IonTextarea you are importing the Vue wrapper which brings v-model support.

I recommend checking out our Ionic Vue Troubleshooting Guide as it covers other common issues developers may run into.

1 Like