Vue js Eingangsanordnung für klonbar Abschnitte

Question

I Eingangsabschnitte haben etwa so:

<div class="cloneable" data-id="0">     
    <div class="col-md-9"> 
     <div class="form-group"> 
      <label>Skills and Qualifications Titles</label> 
      <input placeholder="ex : PHP, WordPress" name="skill.name" type="text" class="form-control" vmodel="skill.name"> 
      <span class="help-block text-danger" v-text="errors.get('skill.name')"></span> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <label>Skill Level %</label> 
      <input placeholder="ex : 90" name="skill.percentage" type="text" class="form-control" v-model="skill.percentage"> 
      <span class="help-block text-danger" v-text="errors.get('skill.percentage')"></span> 
     </div> 
    </div> 
</div> 

Jeder Abschnitt kann geklont werden, um ein Duplikat zu machen, so versuche ich, meine Daten-Array, damit ich es wie

Backend zugreifen

skill[0]['name'] 
skill[1]['name'] 
skill[2]['name'] 
... etc 

ich initiieren die Daten wie folgt:

skill: [ 
{ 
    'name': '', 
    'percentage': '' 
} 
], 

ich die Modelle wie skill.index.name verwendet haben versucht, aber das funktioniert nicht, wie kann ich erreichen, was ich oben versuche?

Answer 1

Wenn ich verstehe, haben Sie eine Reihe von Fähigkeiten wie:

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

und Sie möchten ein bestimmtes Mitglied des Arrays in Ihrer Vorlage zuzugreifen. Der normale Weg, die Arrays in Vorlagen am Ende wird mit einem v-for: wie:

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

..., die alle Fähigkeiten im Array möchten.

Wenn Sie ein bestimmtes Mitglied des Arrays zugreifen möchten, müssen Sie den Index wie folgt hinzuzufügen:

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

(nicht den Bindestrich in v-model vergessen es in Ihrem Beispiel fehlt)

Sie können das sogar tun, wenn Sie einige Daten haben, die Sie als Index verwenden möchten. Zum Beispiel:

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

Dann könnten Sie diese in Ihrer Vorlage verwenden:

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