Dynamique V-nom du modèle en v pour la boucle de Vue 2

Je développe une application et que je suis en utilisant Vue 2 que le framework javascript
à l'intérieur d'un v-for boucle j'ai besoin de le compteur de la boucle pour être lié à la v-model nom des éléments, c'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 ê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 name attribute liaison fonctionne mais je n'ai aucune idée de comment faire pour obtenir l' v-model de travail?

OriginalL'auteur Siavosh | 2017-04-12

  1. 30

    À 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 effectuer les opérations suivantes:

    <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 vue d'instance de configuration comme:

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

    Cochez cette violon pour un exemple.

    merci beaucoup pour votre réponse de l'homme, u sauver la vie. 😀
    Je ne comprends pas pourquoi 3 est utilisé en v-pour la boucle dans la réponse donnée
    le 3 n'est pas nécessaire. C'était un exemple rapide que j'avais tapé, peut-être le même qui est utilisé dans la tripoter comme un exemple (été un moment depuis que j'ai répondu) 🙂
    Comme la valeur totale augmentations de gamme, à la forme.parent_id longueur du tableau va augmenter . C'est un inconvénient de cette solution. Au lieu de 3, si le total commence à partir de 100. Le tableau aura 0-99 positions contenant des valeurs null. Une meilleure solution est donnée par @mansur

    OriginalL'auteur Amresh Venugopal

  2. 7

    Une autre façon de réaliser ceci est à l'aide de support de la notation de l'accès à 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>

    OriginalL'auteur Mansur Anorboev

  3. 0

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

    Ici est un travail solution

    OriginalL'auteur Dharmendra Poonia