Currently, I am working with BootstrapVue and would like to provide a brief overview of my code:
I have a v-for loop with inputs that can be dynamically created using a b-button named "addElement". Additionally, I have the option to select an item from a b-dropdown menu. For each selected item, its length is checked and the corresponding number of inputs equal to the arrayLength are generated.
For instance, if the selected array is ['1111', '2222', '3333'] with an arrayLength of 3, then there should be 3 inputs created.
My challenge lies in triggering a function automatically (denoted as ???) when I select an item from the dropdown list, whereby the function should be executed based on the arrayLength value by passing the correct id, indexParent, and indexChild parameters. How can I tackle this issue?
I require the above-mentioned parameters within my methods for implementation purposes.
Thank you in advance!
<div v-for="(id, indexChild) in inputs" :key="indexChild">
<b-dropdown text="Select" right variant="success"gt;
<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); // Initial deletion before pushing exact inputs based on arrayLength
for (let i = 0; i < this.getLengthArray; i++) {
this.inputs.push({});
}
},
getValues(id, indexParent, indexChild) { // Requires the parameters id, indexParent, indexChild
}
},
data() {
return {
inputs: [{}],
}
},
props: ["indexParent"]