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