プログラムでvueでフォームを作成する

debugcn 投稿 Dev

ユーリFベッカー

作成したいポイントの数をユーザーに尋ねてから、各ポイントの座標を取得したいと思います。

最初のテキストフィールドを作成してポイント数を取得し、次にループを作成して各フォームを作成してみました。動作しますが、各フォームの値を取得する方法がわかりません。

各フォームの値を取得するにはどうすればよいですか？それともそれを行うためのより良い方法はありますか？

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

ヴァムシクリシュナ

私はこれがそれを行うためのより良い方法だと思います：

   <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 : []各Coord入力を表示するためにループスルーするために使用される新しいプロパティを初期化しました
入力されたnodesノードの数をループし、それらの多くのオブジェクト{coordX: "", coordY: ""}をnodesArr配列にプッシュするウォッチャーを設定します
スルー我々ループnodesArr用いてv-for="(node, index) in nodesArr"X-COORDおよびY-COORDの入力を表示します
x-coord入力はcoordX、index取得したを利用して対応するプロパティにバインドされますv-for
同様に、y座標入力はcoordY、index取得したものを利用して、対応するプロパティにバインドされます。v-for
入力は双方向にバインドされているためv-model、nodesArrプロパティにすべての入力データがあり、必要に応じて使用できます。