I am encountering an issue where the v-model directive is not functioning properly inside a v-for loop.
Within my template
<li v-for="(data, key) in product.variants" :key="data.id">
<input type="radio" :id="'variant' + key" name="Variant" v-model="cart.variantId"/>
<label :for="'variant' + key">{{data.variant}}</label>
</li>
within my script
data(){
return{
cart: {
quantity: '1',
colorId: '',
variantId: '',
},
},
computed: {
// Retrieve Quick View Product
product(){
return this.$store.state.quickViewProduct;
},
},
},
Now, the solution to this issue