【Vue.js】動的に要素を増やす

※だいたい3年前ぐらいに別ブログで書いてた記事のリメイク版です。

当時はjQueryからVue.jsに移行しようと勉強中で、「そもそも動的に要素を追加するにはどうすればいいんだろうか」という所で小一時間悩んだ。jQueryだと何も考えずにappend()なり使ってテキトーにやってたんだけども、Vue.jsではそもそもの考え方が違う。語弊はあるかもしれんが、内部で持ってるデータ（モデル）が表示（ビュー）に反映されるって感じ。

<div id="container">
 <svg v-on:click="append">
   <circle v-for="circle in list_circle" :cx="circle.cx" :cy="circle.cy" :r="circle.r"/>
 </svg>
</div> 

見た目的にわかりやすいように、svgで試す。増やしたい要素はv-forディレクティブでぶん回して表示してやるのが良い感じ。今回はcircleを増やしたいので、そいつにv-forつけておく。で、配列 list_circle を走査して、各要素が持つモデル(circle.某)を紐づけてる。SVG領域(#container以下)をクリックすると、append()が走って要素を追加できるようにしておく。

new Vue({
 el : "#container",
 data:{
   list_circle : [
     // ここにデータが追加されてくぞね
     // {cx:0, cy:0, r:0}
   ],
 },
 methods: {
   append:function(){
     this.list_circle.push({
       cx : Math.round( Math.random()*300 ),
       cy : Math.round( Math.random()*300 ),
       r  : Math.round( Math.random()*50 ),
     });
   },
 }
});

Javascript部分。SVGのCircleがcx,cy,rのプロパティを持ってるので、list_circleにデータが追加されるタイミングでそいつらにランダム値を与えてる。

結果、SVG領域をクリックすると、ランダムな座標に、ランダムな半径の円が追加されていくようになった。めでたしめでたし。