鈍足ランナーのＩＴ日記

走るのが好きな5流のＩＴエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

2014-06-27

vue.jsのv-repeatのクリックした要素にアクセスする場合

躓いていたら、同じところで躓いたという記事を発見

軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた

でも、私は、コーヒーわからないので・・・

こちらのソースを参照しつつ

https://github.com/tan-yuki/vue-todo

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to the Mojolicious real-time web framework!</title>
    <script src="/js/vue.min.js"></script>
  </head>
  <body>
  <ul id="demo">
    <li v-repeat="items" v-on="click: hello(this)">
        {{$index}} - {{name}}
    </li>
  </ul>    
  <script src="/js/test.js"></script>
  </body>
  
</html>

var demo = new Vue({
    el: '#demo',
    data: {
        items: [
          {name: "ytnobody"},
          {name: "xtetsuji"},
          {name: "__papix__"}
        ],
    },
    methods:{
      hello: function(item){
          alert(item.name);
      }
    }
});

めちゃくちゃ簡潔に書けるのであーる。素晴らしい。