V-model with dynamically created inputs (with v-for)

Hello,

So to make it short, what I’m trying to do is to create several inputs depending on the number of element I have in an array (these element serves as lebels for each input’s title).
What I want is to bind these inputs to an other array so I can get them and sue them as I want.
Here’s the code, wich will be more clear than what I say.

<div class="cold-md-5 col-md-offset-7">
                        <span v-for="parameter in parameters">
                            <label >{{parameter}}</label>
                            <input type="text" class="form-control" v-model="inputParams><br/>
                        </span>
                    </div>

(parameters is a list of String and I declared inputParams as en empty array. Of course when I type something in an input, every other one are binded to the same value.
What should I put in the v-model if there’s anything to put there? I heard that v-model doesn’t support dynamically created inputs. But if this is the casen how should I operate?

2 Likes

Hi,

you could pass an extra index parameter in v-for, like v-for=(param, index) in parameters. Then you could add the index to you v-model binding, like this: v-model="inputParams[index]’. I think that should work.

3 Likes

Can’t believe it was this simple, thanks a lot :grinning: :grinning: :grinning:

I have got this error.

Error in render function: “TypeError: Cannot read property ‘0’ of undefined”

It is obvious that the model data shoud be defined first. And 0,1,2 indexes would be dynamic. Is there any other workaround.

I suggest you open a new thread, and provide more details - in particular the code that creates this error.

This thread here was solved months ago, and I can attest that its solution works.

Hi @dewerner, @LinusBorg and @madhab452 ,

Did you get the solution of above mentioned error ? I am getting the same and if you know then please let me know…

Thanks in advance…