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); } } });
めちゃくちゃ簡潔に書けるのであーる。 素晴らしい。