I am currently developing a Single Page Application (SPA) that includes options with variants, similar to the image shown below: [1]: https://i.sstatic.net/82I5U.png
However, I have encountered an issue where the second row of inputs for variants is not being displayed.
Here is a snippet of my code:
<template>
<h4>OPTIONS</h4>
<hr>
<div class="row g-3 align-items-center">
<div v-for="(option, index) in options" :key="index">
<div class="">
<label class="col-form-label">Option {{index+1}}</label>
</div>
<div class="mb-2">
<input v-model="option.name" name="option[]" type="text" class="form-control" >
</div>
<label class="col-form-label">Variants</label>
<div class="d-flex">
<div v-for="(variant,vIndex) in options[index].variants" :key="vIndex">
<input v-model="variant.name" type="text" class="form-control">
</div>
<button @click="addVariant(index)" type="button" class="btn btn-secondary btn-sm" style="width: 10%">Add</button>
</div>
<hr>
</div>
<button type="button" class="btn btn-secondary col-4" @click="add()">add option</button>
</div>
</template>
<script>
export default {
data(){
return{
options: [
{
name: '',
variants: [
{
name: '',
}
]
}
],
}
},
methods: {
add() {
this.options.push({ name: '' });
},
addVariant(index){
this.options[index].variants.push({name: ''})
console.log(this.options[index].variants)
}
}
}
</script>
If anyone has insights or suggestions on how to resolve this issue, please feel free to share. Thank you for your help!