【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}
}
})
とってもシンプル!
これで無限に増やせてとても良きです。