After spending hours on this issue, I am still stuck and unable to find a solution through Google search.
The problem lies in my v-for loop where I am iterating over an array of objects. Each iteration renders input fields displaying the name and price of that option. The issue arises when updating one field as all fields get updated simultaneously. Even though they do not share the same v-model, it seems like they do. Below is my HTML code:
<div
v-for="(option, index) in options"
:key="index"
class="row w-full mt-2"
>
<text-input
v-model="option.name"
label="Option"
class="col w-1/2"
/>
<text-input
v-model="option.price"
label="Price"
prefix="+ €"
class="col w-1/4"
/>
</div>
<button
class="text-gray-700 flex items-center mt-3"
@click.prevent="addNewOption"
>
<icon
icon="icons/plus-circle"
class="w-4 h-4 mr-2 icon icon-light"
/> Add options
</button>
Below is my JavaScript code:
data() {
return {
newOption: {
name: null,
price: null,
},
options: [],
};
},
methods: {
addNewOption() {
this.options.push(this.newOption);
},
},
If you can identify what I'm doing wrong here, I would greatly appreciate your help.
Thank you in advance!