I'm using BootstrapVue
.
What I want to do: I have a b-form-input
in which I write a number. After my b-button
is clicked, I want to add it to my inputs
. This works great, but now I want to first check if my number is still in my inputs
.
Issue: After trying to add something to my inputs
I always get the following error: [Vue warn]: v-on handler error : "TypeError: this.inputs[i] is undefined" "
I have stated that everything in my data is correct and without for-loop
it works fine. What's wrong here? I can't figure it out..
When I try to do this: this.inputs[0].number
I get the correct data..
Thanks for trying to help me!
Code in my template:
<b-form-input v-model="number"></b-form-input> <b-button @click="addSomething(number)"></b-button>
Code in my script:
addSomething(number) { if(this.inputs != []) { for(let i = 0; i <= this.inputs.length; i++) { if(number === this.inputs[i].number) { console.log("Still existing!"); } else if(number !== this.inputs[i].number) { this.inputs.push({ INPUT_NUMBER: number, }) } } } },
Using conditions
i <= this.inputs.length
You are exceeding the bounds of the array. In JavaScript, over-indexing an array returnsundefined
.Fixed handler should be: