在<input>方法中将值传递给每个 for 循环之后

Question

我正在使用BootstrapVue.

我有一个for loop，我在其中获得一个数组的唯一编号，这些数组被命名为this.number- 我input.push()我的b-form-input(在本例中)3 次。

每次我输入一个新b-form-input我都想传递第一个，然后当然是我的下一个this.number数，它将显示在那里。

我该怎么做？谢谢！

模板：

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

我的脚本：

methods: {
inputValue() {
for (let i = 0; i < 3; i++) {
this.number= (String(this.data[i].number));
this.inputs.push({});
console.log(this.number);
}
}
},
data() {
return {
inputs: [{}],
}
},

我的console.log(this.number)

1111
2222
3333

所以1111应该v-model/value of b-form-input 0，2222应该v-model/value of b-form-input 1，3333应该v-model/value of b-form-input 2

Answer 1

据我了解，您要做的是：

1. 渲染 3 个输入
2. 当用户输入数字 2 时，它会更新输入数字 2

您的代码组织方式很难遵循正在发生的事情。我的建议是有一个函数，当输入发出input事件然后传递索引时触发(几乎是你对searchNumber

的索引)

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

methods: {
onInput(input, index) {
this.inputs[index].number = input;
}
}

请注意，我已经从您的b-form-input中删除了v-model。现在我们只有value和@input.