I'm looking to prompt the user to specify how many points they want to create, followed by entering coordinates for each point.
One approach I attempted involved using an initial text field to capture the number of points desired, and then using a loop to generate a form for each point. While this method successfully creates the forms, I am struggling to retrieve the values entered in each form.
Is there a more effective way to achieve this? How can I properly capture and store the values from each form?
<template>
<div>
<v-card class="mb-3">
<v-card-text>
<v-text-field label="How many nodes" :value="nodes" @input="onInput" type="number"></v-text-field>
</v-card-text>
</v-card>
<v-container fluid grid-list-md>
<v-layout row wrap>
<template v-for="i in nodes">
<v-flex :key="i" xs12 md3>
<div>
<v-card class="mb-3">
<v-card-text>
<div>Node {{i}}</div>
<v-text-field label="Coord X" value="x1" @input="getValues" type="number" v-model="no1"></v-text-field>
<v-text-field label="Coord Y" :value="y1" @input="getValues" type="number"></v-text-field>
</v-card-text>
</v-card>
</div>
</v-flex>
</template>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data () {
return {
nodes: 2
}
},
methods: {
onInput (val) {
this.nodes = parseInt(val)
}
}
}
</script>