どういう話

Vue.js でカスタムイベントを受け取るにはコンポーネントにイベントをバインドしなきゃいけなかった、という話。

上手くいかなかった例

<div id="list" v-on:item-clicked-event="apply">
  <p>{{ clickedTarget }}</p>
  <ul>
    <list-item v-for="targetItem in targetList" :target="targetItem" :key="targetItem.id"></list-item>
  </ul>
</div>

const list_item = Vue.component('list-item', {
  props: ['target'],
  template: `<li v-on:click="fireClickedEvent">{{target.text}}</li>`,
  methods: {
    fireClickedEvent: function(){  this.$emit('item-clicked-event', this.target.text);}
  }
});

const myList = new Vue({
  el: '#list',
  data: {
    clickedTarget: 'ひよこ',
    targetList: [
    	{id:0, text:'ひよこ'},
    	{id:1, text:'ひつじ'},
    	{id:2, text:'こねこ'}
    ]
  },
  methods: {
    apply: function(name) { this.clickedTarget = name; }
  }
});

上手くいった例

<div id="list">
  <p>{{ clickedTarget }}</p>
  <ul>
    <list-item v-on:item-clicked-event="apply" v-for="targetItem in targetList" :target="targetItem" :key="targetItem.id"></list-item>
  </ul>
</div>

JavaScript 側に変更はない。v-on:item-clicked-event="apply"がどこに書かれているのかに注目していただきたい。どこに v-on するのかって話はあまり見なかったけどこれは割と常識なのだろうか。でも、コンポーネントが発火したのだからコンポーネントに書いた方が分かりやすくはあるよね。