為VueJS中的v-for產生的每個輸入表單提供唯一的ID的方法

Question

我正在嘗試產生一個數字（透過props傳遞）的輸入表單，並將使用者輸入儲存在inputValues陣列中。 我的程式碼如下：

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

export default defineComponent({
  name: 'name',
  props: [
      'number',
    ],
  data() {
    return {
      inputValues: []
    }
  }
  });

但是inputValues中沒有儲存任何內容。我做錯了什麼？另外，我如何給輸入欄位賦予不同的id，以便以後可以在CSS中以不同的樣式進行設定？

編輯：我設法讓它工作了！

<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>