Vue.jsでDOM要素を増やす(&JSFiddleおためし)


▲パワポで描いたJSFiddleのロゴ(パチもん)

最近Vue.jsを始めたのだけれど、動的に要素を追加するにはどうすればいいんだろうかという所で小一時間悩んだ。jQueryだと何も考えずにappend()なり使ってペペペペッてやってたんだけどね。ちょっと調べてみると、Vue.jsではappendTo()とかいうのがあるかと思ったらバージョン2からは削除されててネイティブAPI使えだとかいう話になってるみたい。

しかしせっかくVue.js使ってるんだし、もうちょいなんかこう・・・スマートに実装できないもんかね?ググり回ってもトレンドなお作法がよく分からんので「JSFiddle」ってやつで試行錯誤しながらやってみた。

JSFiddleってのは、WEB上でサクッと組んだコード(HTML/CSS/JS)がサクッと動かせるサービスで、ブログへのコード貼り付けも簡単にできる。しかも、jQueryだとかVue.jsだとかの有名所のライブラリなんかは、「script src=・・・」とかわざわざ書かなくても、予め「このライブラリのこのバージョン使うかんね!!」って設定しとけば、勝手にロードしてくれる。うほっ、超べんりー。


試しに作ってみたやつがこちら。「Result」タブに切り替えるとプレビューできる。テキトーにSVG領域(300x300px)をクリックすると、ランダムな大きさの黒い丸が、ランダムな座標に追加されてく。

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

HTML部分。いろいろ試した結果、増やしたい要素は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にデータが追加されるタイミングでそいつらにランダム値を与えてる。

しかし、しゅごいなぁ。こうやってちょっと触っただけでも、Vue.jsとSVGとの親和性はピカイチな予感がする。もっといろいろと複雑なことを試してみようかねー。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)