【javascript勉強中】Vue.jsのv-for="n in 10"で入力フォームをボタンクリック追加する

なんと便利なのかと、感動しました。

↑のような感じで、「+」を押すとテキストフォームが増えていくやつをやってみました。

HTMLは↓のような感じで、v-for="n in 10"の「10」と入れるところに変数を入れて、buttonタグに@clickで関数を入れています。また、nameに連番を付けています。こういう感じで連番振れるのとても便利で感動します。アイコンとかも連番にして、ズラ～っと入られるんですね。すごいです。

 

    <div id="app">

      <button @click="addCount">＋</button>

      <form>

        <div v-for="n in count">

          <input type="text" :name="'upload_file' + n">

        </div>

        <div>

          <button type="submit" name="touroku" onclick="submit()">送信</button>

        </div>

      </div>

      </form>

    </div>

 

JSは↓のような感じです。

 

  new Vue({

    el:"#app",

    data:{

      count: 1

    },

    methods:{

      addCount: function(){this.count=this.count+1}

    }

 

  })

とってもシンプル！

これで無限に増やせてとても良きです。