Vue2 dynamic input name

Question

Using Vue2 I'm trying to create some input tags which have dynamic content. I have tried binding it to some function :name="someFunction" but that doesn't seem to work on this occasion. I need the name attribute to be in the format

people[0]['name']
people[1]['name']

With the number value being the key value of the loop over people. I usually create ajax/axios requests based on the stored model but on the occasion that method isn't possible.

Here is an example snippet of what I've got currently:

new Vue({

  el : '#example', 
  
  data : { 
    
    people : [
       {
          name : 'Tom',
          age : 12
        },
        
        {
          name : 'Susan',
          age : 18
        },
    ]
    
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">

<div v-for="(person,key) in people">

  <input type="text" name="people[key]['name']" :value="person.name">
  
  <!-- The name should be dynamic people[0]['name'] -->
  <!-- and people[1]['name'] -->
</div>

</div>

Many thanks in advance

acdcjunior · Accepted Answer · 2018-04-15 19:14:18Z

3

You can use v-bind (or its shorthand :) and make name into :name. This way, its value can be any JavaScript expression.

Example:

:name="'people[' + key + '][\'name\']'"

Notice the value of the attribute is actually the JavaScript expression:

       'people[' + key + '][\'name\']'

Which is a string concatenated with the key variable, concatenated with another string.

Demo below:

new Vue({

  el : '#example', 
  
  data : { 
    
    people : [
       {
          name : 'Tom',
          age : 12
        },
        
        {
          name : 'Susan',
          age : 18
        },
    ]
    
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">

<div v-for="(person,key) in people">

  <input type="text" :name="'people[' + key + '][\'name\']'" :value="person.name">
  
  <!-- The name should be dynamic people[0]['name'] -->
  <!-- and people[1]['name'] -->
</div>

</div>

edited Apr 15, 2018 at 19:14

answered Apr 15, 2018 at 19:11

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

1 Comment

Simon R Over a year ago

Excellent - thank you! Had forgotten you could do it that way!

Anjasmara Dwi.S · Accepted Answer · 2021-04-17 06:20:12Z

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="example">

<div v-for="(person,index) in people" :key="index">

       <input type="text" :name="`people[${index}][${person.name}]`" :value="person.name">
  
  <!-- The name should be dynamic people[0]['name'] -->
  <!-- and people[1]['name'] -->
</div>

</div>

i think you must add binding key ":key="your_index"" and replace your parameter name key with index, so that the meaning is clearer

answered Apr 17, 2021 at 6:20

Anjasmara Dwi.S

3291 silver badge9 bronze badges

Collectives™ on Stack Overflow

Vue2 dynamic input name

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