Moyen de fournir un identifiant unique pour chaque formulaire de saisie généré par v-for dans VueJS

Question

J'essaie de générer un formulaire de saisie pour les nombres (transmis via des accessoires) et de stocker la saisie de l'utilisateur dans le tableau inputValues. Mon code est le suivant :

<template>
<div v-for="n en nombre" v-bind:key="n">
        <input ref= "inputs" v-bind:id="'str' + n" :v-model="inputValues[n]" />
        
      </div>
</modèle>

exporter le composant défini par défaut ({
  nom nom',
  accessoires : [
      'nombre',
    ],
  données() {
    retour {
      Valeurs d'entrée : []
    }
  }
  });</pré>
<p>Mais rien n’est stocké dans inputValues. Qu'ai-je fait de mal? De plus, comment puis-je donner au champ de saisie un identifiant différent afin de pouvoir le styliser différemment en CSS plus tard ? </p>
<p>Edit : j'ai réussi à le faire fonctionner ! </p>
<p>

<pre class="snippet-code-html lang-html Prettyprint-override"><code><div v-for="(n,i) en nombre" v-bind:key="n"> ;
        <input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
        
</div></code>

Answer 1

J'ai réussi à le faire fonctionner. v-bind : ou : : ne doivent pas être utilisés avec v-model. J'ai ajouté l'index car n commence à 1 au lieu de 0.

<div v-for="(n,i) in number"  v-bind:key="n">
        <input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
        
</div>