为VueJS中的v-for生成的每个输入表单提供唯一的ID的方法
<p>我正在尝试生成一个数字（通过props传递）的输入表单，并将用户输入存储在inputValues数组中。
我的代码如下：</p>
<pre class="brush:php;toolbar:false;"><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: []
}
}
});</pre>
<p>但是inputValues中没有存储任何内容。我做错了什么？另外，我如何给输入字段赋予不同的id，以便以后可以在CSS中以不同的样式进行设置？</p>
<p>编辑：我设法让它工作了！</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div v-for="(n,i) in number" v-bind:key="n">
<input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
</div></code></pre>
</p>
1
848
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
我设法使它工作。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>