Creating a name for v-model dynamically in Vuejs

Question

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:

1st click / component with v-model name 'nameModel01'
2nd click / component with v-model name 'nameModel02'
3rd click / component with v-model name 'nameModel03'

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

array = [nameModel01, nameModel02, nameModel03]

Nazar Niphone · Accepted Answer · 2022-10-05 13:47:17Z

2

You need to use object.

I created an example

Pay attention on arr variable

answered Oct 5, 2022 at 13:47

Nazar Niphone

844 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Denari Over a year ago

Thankssss a lot ;) I did exactly what you wrote in your example, just a few adapts but it is working properly

E-g · Accepted Answer · 2022-10-05 13:37:18Z

0

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.

answered Oct 5, 2022 at 13:37

E-g

5444 silver badges18 bronze badges

Collectives™ on Stack Overflow

Creating a name for v-model dynamically in Vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related