I have a problem that, v-model not working inside v-for Loop.
Inside 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>
inside my script
data(){
return{
cart: {
quantity: '1',
colorId: '',
variantId: '',
},
},
computed: {
// Get Quick View Product
product(){
return this.$store.state.quickViewProduct;
},
},
},
Now how I fix this problem
If you are storing a value from a set of radio. buttons in a property, you need to identify the buttons. Not with the id, but with a value. Try this:
<li v-for="(data, key) in product.variants" :key="data.id">
<input type="radio" :id="'variant' + key" name="Variant" v-model="cart.variantId" :value="data.id"/>
<label :for="'variant' + key">{{data.variant}}</label>
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.