How can I customize the V-MODEL for each object generated?
I am developing a cupcake website where users can create multiple forms with just one submission.
However, when generating two fields, the inputs of the second field are linked to the inputs of the first field.
Here's the code snippet I'm working on:
<template>
<div>
<button @click="cupcakes.push(def)">Add Cupcake</button>
<div v-for="(cupcake, index) in cupcakes" :key="index">
<input type="text" v-model="cupcakes[index].name">
<input type="text" v-model="cupcakes[index].description">
<input type="text" v-model="cupcakes[index].type">
<input type="text" v-model="cupcakes[index].prize">
<input type="text" v-model="cupcakes[index].color">
</div>
<button @click="onSubmit">Create Cupcake</button>
</div>
</template>
<script>
export default {
data() {
return {
cupcakes: [],
def: {
name: '',
description: 'Originals',
type: 'small',
prize: 500,
color: 'color'
}
}
},
methods: {
onSubmit() {
console.log(this.cupcakes);
}
}
}
</script>
I have attempted different methods, but none seem to work as expected.
How can I detach the two fields so that upon submission, it only captures the user input in each respective field?