VueJS中如何为v-for生成的输入表单设置ID并绑定数据？

问题描述 #

尝试通过props传入的number参数生成对应数量的输入框，将用户输入存入inputValues数组，但初始代码无法存储数据，同时需要为输入框设置不同ID用于CSS定制样式。

初始代码：

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

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

问题原因 #

1. 数组索引不匹配：v-for="n in number"中的n从1开始计数（比如number=3时，n为1、2、3），但数组inputValues的索引从0开始，inputValues[n]访问的是数组中不存在的索引位置，Vue无法追踪这类未初始化的数组元素变化，导致数据无法存储。
2. v-model语法错误：初始代码中写了:v-model，多了不必要的冒号，v-model是指令，不需要用绑定语法。

解决方法 #

修改v-for语法，使用循环的索引i绑定数组元素，确保索引匹配数组的0起始规则：

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

输入框ID设置说明 #

初始代码中的:id="'str' + n"已经可以生成唯一ID（如str1、str2、str3...），完全满足CSS定制需求：

• 单独定制某个输入框：使用ID选择器，如#str1 { /* 样式代码 */ }
• 统一定制所有生成的输入框：使用属性前缀选择器，如input[id^="str"] { /* 样式代码 */ }

内容的提问来源于stack exchange，提问作者alsi