With Vue2, I am attempting to create input tags with dynamic content. My attempts at binding it to a function using :name="someFunction" have been unsuccessful in this case. The name attribute needs to be in the format
people[0]['name']
people[1]['name']
The numeric value should correspond with the key value of the loop over people. While I typically rely on ajax/axios requests based on the stored model, that approach is not feasible this time.
Below is a snippet of my current setup:
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>Thank you for your assistance!