I am facing an issue with showing select options of my product in multiple forms. Whenever I choose one option in one form, all the other select forms also change automatically.
How can I make each select form unique?
Here is what I have tried:
My select form
<tr v-for="(adddiagnosilom, index) in adddiagnosis" :key="adddiagnosilom.value">
<td>{{ adddiagnosilom.value }}</td>
<td>{{ adddiagnosilom.CodeID }}</td>
<td>{{ adddiagnosilom.text }}</td>
<td>
<ListSelect :list="optionProduct"
option-value="value"
option-text="text"
:selected-item="itemproduct[index]"
placeholder="select product"
@select="onSelectProduct">
</ListSelect>
</td>
<td>
<input class="form-control" placeholder="0" v-model="adddiagnosilom.ordered">
</td>
<td>
<input class="form-control" placeholder="0" v-model="adddiagnosilom.price">
</td>
<td>{{ adddiagnosilom.sum = adddiagnosilom.ordered * adddiagnosilom.price }}</td>
</tr>
My variable
data() {
return {
adddiagnosis: {},
itemproduct: [
{ value: '', text: '' }
],
}
}
My select method
onSelectProduct (itemproduct) {
this.itemproduct = itemproduct
},
Here is the screenshot https://i.sstatic.net/Yg2xB.jpg
Currently, all select options change when one is modified. What I want to achieve is to only change the select form that I am currently modifying, not affect all of them.