web-dev-qa-db-fra.com

Nom du modèle V dynamique dans une boucle v-pour Vue 2

Je développe une application et j'utilise Vue 2 comme framework javascript. Dans une boucle v-for, le compteur de la boucle doit être lié au nom v-model des éléments, ce qui est mon code:

<div v-for="n in total" class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id['  + n  + ']'" v-model="form.parent_id_n" />
</div>

J'ai besoin de n pour être le compteur de la boucle, par exemple pour le premier élément, il devrait être:

<div class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>

la liaison name attribute fonctionne mais je ne sais pas comment faire fonctionner le v-model également?

javascriptvuejs2
15
Siavosh

Pour utiliser v-model avec form.parent_id[n]: 

  1. form devrait être une propriété de données.
  2. form.parent_id devrait être un tableau.

Ensuite, vous pouvez faire ce qui suit:

<div id="demo">
  <div v-for='n in 3'>
    <input v-model="form.parent_id[n]">
  </div>
  <div v-for='n in 3'>
    {{ form.parent_id[n] }}
  </div>
</div>

en ayant une configuration vue instance comme:

var demo = new Vue({
    el: '#demo',
    data: {
      form: {
        parent_id: []
      }
    }
})

Vérifiez ce violon pour un exemple de travail.

24
Amresh Venugopal

Une autre solution consiste à utiliser la notation entre crochets pour accéder à la propriété de l'objet. 

<div v-for="n in total" class="form-group">
   <input type="hidden" 
          id="input_id" 
          :name="'input_name_id['  + n  + ']'" 
          v-model="form['parent_id_' + n ]" />
</div>
5
Mansur Anorboev

En supposant que input_name_id est une chaîne, vous devez faire :name="'input_name_id' + n"

Voici un travail solution

1
Dharmendra Poonia