[Vuejs]-Vue js input array for cloneable sections

0👍

If I understand, you have an array of skills like:

skill: [
{'name': 'a_name', 'percentage': '20'}
{'name': 'b_name', 'percentage': '30'}
],   

and you want to access a particular member of that array in your template. The normal way the arrays end up in templates is using a v-for: like:

<li v-for="a_skill in skill">
    {{ a_skill.name }}
</li>

…which would like all the skills in the array.

If you want to access a particular member of that array you will need to add the index like this:

<input v-model="skill[0].name"> // not skill.0.name

(don’t forget the hyphen in v-model it’s missing in your example)

You can even do that if you have some data you want to use as the index. For example:

  data () {
    return {
      skill: [
        {"name": "Foo"},
        {"name": "Bar"}
      ],
      i: 1
    }},

Then you could use this in your template:

<input v-model="skill[i].name">

Leave a comment