I'm working with BootstrapVue.
I have a for loop where I get unique numbers of a array these are named this.number - I input.push() my b-form-input (in this example) 3 times.
Every time I'm inputing a new b-form-input I want to pass the first and then of course my next number of this.number to my input that it will be shown there.
How can I do that? Thank You!
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>
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: [{}],
}
},
my console.log(this.number)
1111
2222
3333
So 1111 should be v-model/value of b-form-input 0, 2222 should be v-model/value of b-form-input 1 and 3333 should be v-model/value of b-form-input 2
From what I understood what you are trying to do is:
You have your code organized in a way that is difficult to follow what is going on. My suggestion is to have a function that is triggered when an input emits a input event and then pass the index (almost what you have with 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;
}
}
Note that I have removed v-model from your b-form-input. Now we only have value and @input.