Möglichkeit, für jedes von v-for in VueJS generierte Eingabeformular eine eindeutige ID bereitzustellen

Question

Ich versuche, ein Eingabeformular für Zahlen zu generieren (über Requisiten übergeben) und die Benutzereingaben im InputValues-Array zu speichern. Mein Code lautet wie folgt:

<template>
<div v-for="n in number" v-bind:key="n">
        <input ref= "inputs" v-bind:id="'str' + n"
        
      </div>
</template>

Standard exportieren defineComponent({
  Name Name',
  Requisiten: [
      'Nummer',
    ],
  Daten() {
    zurückkehren {
      Eingabewerte: []
    }
  }
  });

In den Eingabewerten wird jedoch nichts gespeichert. Was habe ich falsch gemacht? Wie gebe ich dem Eingabefeld außerdem eine andere ID, damit ich es später in CSS anders formatieren kann?

Bearbeiten: Ich habe es geschafft, es zum Laufen zu bringen!

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

Answer 1

我设法使它工作。v-bind: 或者 ":" 不应该用于 v-model。我添加了索引，因为 n 从 1 开始而不是从 0 开始。

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