VueJS の v-for によって生成された各入力フォームに一意の ID を提供する方法

Question

数値の入力フォーム (小道具を介して渡される) を生成し、ユーザー入力を inputValues 配列に保存しようとしています。 私のコードは次のとおりです:

<テンプレート>
<div v-for=「n 個の数」v-bind:key=「n」>
        <input ref= "inputs" v-bind:id="'str' n" :v-model="inputValues[n]" />
        
      </div>
</テンプレート>

デフォルトのエクスポートdefineComponent({
  名前: '名前'、
  小道具: [
      '番号'、
    ]、
  データ（） {
    戻る {
      入力値: []
    }
  }
  });

ただし、inputValues には何も格納されません。私が何を間違えたのでしょうか？また、後で CSS で異なるスタイルを設定できるように、入力フィールドに別の ID を与えるにはどうすればよいですか?

編集: なんとか動作させることができました。

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

Answer 1

なんとか動作させることができました。 v-bind: または ":" は v-model と一緒に使用しないでください。 n は 0 ではなく 1 から始まるため、インデックスを追加しました。

リーリー