【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領域をクリックすると、ランダムな座標に、ランダムな半径の円が追加されていくようになった。めでたしめでたし。
この記事が気に入ったらサポートをしてみませんか?