如何在Vue方法的for循环每次迭代后将值传递给新增的b-form-input组件

你当前的问题出在三个地方：

• 向inputs数组追加元素时只推送了空对象，没有将获取到的number值存入对应对象中
• 模板同时写了v-model和:value属于冗余配置，会产生绑定冲突
• 初始inputs默认带了一个空对象，会额外渲染一个无默认值的空白输入框

修改后的模板代码 #

去掉冗余的:value属性，v-model已经内置了值绑定和更新逻辑：

<div v-for="(id, index) in inputs" :key="index">
  <b-form-input 
    type="number" 
    v-model="id.number" 
    @input="searchNumber(id, index)" 
  ></b-form-input>
</div>

修改后的脚本代码 #

methods: {
  inputValue() {
    // 清空原有数组避免重复渲染，不需要可删除该行
    this.inputs = []
    for (let i = 0; i < 3; i++) {
      const currentNumber = String(this.data[i].number)
      // 推送对象时直接带入number属性，和v-model的绑定字段对应
      this.inputs.push({
        number: currentNumber
      })
      console.log(currentNumber)
    }
  }
},
data() {
  return {
    // 初始改为空数组，避免多出来一个空白输入框
    inputs: [],
  }
},

补充提示 #

如果你确定输入框为数字类型，可去掉String()转换直接存储原始数值，避免字符串数字和number类型输入框的类型不匹配问题。修改后inputs数组每一项都会对应存储你循环拿到的编号，下标0对应1111、下标1对应2222、下标2对应3333，完全符合预期效果。

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