I am currently utilizing BootstrapVue.
In my code, I have implemented a for loop to retrieve unique numbers from an array, which are stored as this.number. For each iteration of the loop, I use input.push() to add a new b-form-input element (in this case, 3 times).
When adding a new b-form-input, I want to display the corresponding unique number from this.number in each input field.
Here is a snippet of the template:
<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>
And here is part of my script:
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: [{}],
}
},
The result of console.log(this.number) is:
1111
2222
3333
Hence, 1111 should correspond to the v-model/value of b-form-input 0, 2222 should be displayed in v-model/value of b-form-input 1, and 3333 should populate v-model/value of b-form-input 2.