Javascript 在vue中以编程方式创建表单
我想问用户他想要创建多少点,然后得到每个点的坐标 我尝试创建一个初始文本字段来获得多少个点,然后创建一个循环来创建每个表单。它可以工作,但我不知道如何获得每个表单的值 如何获取每个表单的值?还是有更好的方法?Javascript 在vue中以编程方式创建表单,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我想问用户他想要创建多少点,然后得到每个点的坐标 我尝试创建一个初始文本字段来获得多少个点,然后创建一个循环来创建每个表单。它可以工作,但我不知道如何获得每个表单的值 如何获取每个表单的值?还是有更好的方法? 节点{{i} 导出默认值{ 数据(){ 返回{ 节点:2 } }, 方法:{ onInput(val){ this.nodes=parseInt(val) } } } 我认为这样做会更好: <template> <div> &l
节点{{i}
导出默认值{
数据(){
返回{
节点:2
}
},
方法:{
onInput(val){
this.nodes=parseInt(val)
}
}
}
我认为这样做会更好:
<template>
<div>
<v-card class="mb-3">
<v-card-text>
<v-text-field label="How many nodes" v-model="nodes" type="number"></v-text-field>
</v-card-text>
</v-card>
<v-container fluid grid-list-md>
<v-layout row wrap>
<template v-for="(node, index) in nodesArr">
<v-flex :key="i" xs12 md3>
<div>
<v-card class="mb-3">
<v-card-text>
<div>Node {{index + 1}}</div>
<v-text-field label="Coord X" v-model="node[index].coordX" type="number" v-model="no1"></v-text-field>
<v-text-field label="Coord Y" v-model="node[index].coordY" 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: 0,
nodesArr: []
}
},
watch: {
nodes(newVal) {
this.nodesArr = [];
for(var i=0; i<this.nodes; i++){
this.nodesArr.push({coordX: "", coordY: ""});
}
}
},
methods: {
}
}
</script>
节点{index+1}
导出默认值{
数据(){
返回{
节点:0,
nodesar:[]
}
},
观察:{
节点(newVal){
this.nodesar=[];
对于(var i=0;i
<template>
<div>
<v-card class="mb-3">
<v-card-text>
<v-text-field label="How many nodes" v-model="nodes" type="number"></v-text-field>
</v-card-text>
</v-card>
<v-container fluid grid-list-md>
<v-layout row wrap>
<template v-for="(node, index) in nodesArr">
<v-flex :key="i" xs12 md3>
<div>
<v-card class="mb-3">
<v-card-text>
<div>Node {{index + 1}}</div>
<v-text-field label="Coord X" v-model="node[index].coordX" type="number" v-model="no1"></v-text-field>
<v-text-field label="Coord Y" v-model="node[index].coordY" 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: 0,
nodesArr: []
}
},
watch: {
nodes(newVal) {
this.nodesArr = [];
for(var i=0; i<this.nodes; i++){
this.nodesArr.push({coordX: "", coordY: ""});
}
}
},
methods: {
}
}
</script>