I'm working with BootstrapVue
. First I want to explain my code shortly:
I have a v-for with inputs, these I can create as often as I want with a b-button -> addElement
. Or I can select an item
from my b-dropdown
- there I am checking the length of my selected and push the amount of my arrayLength
as my inputs.
-> e.g. selected array = ['1111', '2222', '3333'] -> arrayLength = 3 -> 3 inputs
Now I need to get a function fired automatically (marked as ???
) when exactly this case happend that I'm selecting something from my dropdown - e.g. is my arrayLength = 3
, it should be fired 3 times with correct id, indexParent and indexChild
. How can I solve that?
I need this above named parameters
in my methods..
Thanks in advance!
<div v-for="(id, indexChild) in inputs" :key="indexChild">
<b-dropdown text="Select" right variant="success">
<b-dropdown-item v-for="(item, indexDropdown) in json" :key="indexDropdown" @click="trySomething(item.Number)">{{item.Name}}</b-dropdown-item>
</b-dropdown>
<b-button v-b-toggle="'newElement'+indexParent+indexChild">Element {{indexChild + 1}}></b-button>
<b-collapse :id="'newElement'+indexParent+indexChild"
<div ???="getValues(id, indexParent, indexChild)"> <!-- how can I fire this when created? -->
<!-- Do some more code -->
</div>
</b-collapse>
</div>
<!-- create new "item"-elements -->
<div>
<b-button @click="addElement()">Add element</b-button>
</div>
methods: {
addProduct() {
this.inputs.push({})
},
trySomething(itemValue) {
var array = [];
const products = this.otherJSON.find((i) => i.Number === itemValue);
for (let key in products.ID) {
array.push(products.ID[key]);
}
this.getLengthArray = array.length;
this.inputs.splice(0) //at first I need to delete all to push exact inputs based on arrayLength
for (let i = 0; i < this.getLengthArray; i++) {
this.inputs.push({});
}
},
getValues(id, indexParent, indexChild) { //Here I need the parameters id, indexParent, indexChild
}
},
data() {
return {
inputs: [{}],
}
},
props: ["indexParent"]
I've just used:
<div v-if="getValues(id, indexParent, indexChild)" v-once></div>
and it worked out for me!