代码之家 › 专栏 › 技术社区 › Yuri F Becker

在vue中以编程方式创建表单

vuetify.js vue.js javascript

Yuri F Becker · 技术社区 · 6 年前

我想问用户他想创建多少个点,然后得到每个点的坐标。

我尝试创建一个初始文本字段来获得多少个点,然后创建一个循环来创建每个表单。它可以工作,但我不知道如何获得每个表单的值。

如何获取每个表单的值?还是有更好的方法?

   <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>

1 回复 | 直到 6 年前

Vamsi Krishna 6 年前

我认为这是一种更好的方法:

   <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>

发生了什么:

设置 v-model 获取节点数并将其绑定到 nodes 所有物
初始化了新属性 nodesArr : [] 用于循环显示每个坐标输入
在上设置监视程序 节点 循环输入的节点数并推送这些对象 {coordX: "", coordY: ""} 到 nodesArr 大堆
我们循环通过 节点SAR 使用 v-for="(node, index) in nodesArr" 显示x坐标和y坐标的输入
x坐标输入绑定到相应的 coordX 使用 index 我们进去了 v-for
类似地,y坐标输入绑定到相应的 coordY 使用 指数 我们进去了 v-用于
因为输入是双向的,所以使用 V-模型 你有所有的输入数据 节点SAR 可以按您的意愿使用的属性