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

【问题标题】：pass value to <input> after every for loop in methods在方法中的每个 for 循环之后将值传递给 <input>
【发布时间】：2021-12-05 08:36:05
【问题描述】：

我正在与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

【问题讨论】：

您的methods 无效。请使用正确版本的methods 更新问题
忘记了我的方法名称。但至少我只需要知道如何将this.number 每次都用我的input.push() 推送到我的b-form-input

标签： javascript vue.js vuejs2 bootstrap-vue

【解决方案1】：

据我了解，您正在尝试做的是：

渲染 3 个输入
当用户输入输入编号 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。

【讨论】：