CODEWITHSUNDEEP
javascriptvue.js
João Denari
João Denari

Reputation: 113

Creating a name for v-model dynamically in Vuejs

I have a button to create a new component 'AddressField' in each click. Inside this component I have a input that a I need to store the data inside the input;

Here is the button to activate the logic to create a new component

 <div class="col-3 p-1">
      <button 
          type="button" 
          class="btn btn-success col-12" 
          @click="addAddressField">Calculate
      </button>
</div>

Reusable component that is created in each click on the button above

<ul class="p-0 m-0">
      <address-field
           v-for="(addressfield) in AddressFieldObject"
           :key="addressfield.id"
           :title="addressfield.title"
           v-model="?"
       ></address-field>
</ul>

Function to add a component

addAddressField() {

    this.AddressFieldObject.push({
          id: 'id' + this.nextAddressFieldID++,
          title: 'title' + this.nextAddressFieldTitle++
         })
        this.newAddressField = ''
         }

Is there anyway to create a name for v-model dynamically? For example:

In the end, my objective is to store all the input inside a array or a object, just like:

Upvotes: 0

Views: 1802

Answers (2)

Nazar Niphone
Nazar Niphone

Reputation: 84

You need to use object.

I created an example

Pay attention on arr variable

Upvotes: 2

E-g
E-g

Reputation: 544

Could do like this.

<ul class="p-0 m-0">
      <address-field
           v-for="(addressfield, index) in AddressFieldObject"
           :key="addressfield.id"
           :title="addressfield.title"
           v-model="nameModel[index]"
       ></address-field>
</ul>

or use addressfield.id instead of index.

Upvotes: 0

Related Questions