title: How to get Vue to catch event?
body: <p>Edited to correct unreported syntax error (see comments). It now works as desired.</p>
  
  <p>I'm having trouble getting my event handler to fire in the following Vue code.</p>
  
  <p>As you see, there are two components, <code>posts</code> and <code>post</code>, and a root <code>Vue</code> instance. The button in the <code>post</code> template should fire the <code>remove</code> event, which is captured by the <code>v-on:remove</code> handler in <code>posts</code> which calls <code>posts.deleteItem</code> with the index of the post. Can someone give me a hint what I'm doing wrong?</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
          &lt;head&gt;
          &lt;title&gt;Posts&lt;/title&gt;
              &lt;!--link href="../css/bootstrap.css" rel="stylesheet" /--&gt;
          &lt;script src="../vue.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="app"&gt;
                  &lt;posts&gt;&lt;/posts&gt;
              &lt;/div&gt;
              &lt;script&gt;
                  window.onload = function() {
  
                      // A post
                      Vue.component('post-item', {
                              props: ['post'],
                              data: function() {
                                  return {
                                      editing: false,
                                      _cachedItem: ''
                                  }
                              },
                              methods: {
                                  deleteItem(postId) {
                                      debugger
                                      this.$emit('remove', event.target.value);
                                  },
                              },
                              template: `
                                  &lt;div v-on:remove="deleteItem"&gt;
                                      &lt;li v-show="!editing"&gt;
                                          &lt;p v-html="post.text"&gt;&lt;/p&gt;
                                              &lt;button v-on:click="$emit('remove')"&gt;Delete&lt;/button&gt;
                                      &lt;/li&gt;
                                  &lt;/div&gt;
                              `
                      })
  
                      Vue.component('posts', {
                              data: function() {
                                  return {
                                      posts: [
                                          {id: 0, text: "Day at beach"},
                                          {id: 1, text: "Carving the canyons"},
                                          {id: 2, text: "Kickin' it"}
                                      ],
                                  };
                              },
                              methods: {
                                  deleteItem(index) {
                                      debugger
                                      this.posts.splice(index, 1);
                                  }
                              },
                              template: `
                                  &lt;div&gt;
                                      &lt;ol&gt;
                                          &lt;post-item
                                                  v-for="(post, index) in posts"
                                                  v-bind:post="post"
                                                  v-bind:key="post.id"
                                                  v-on:remove="deleteItem(index)" /&gt;
                                      &lt;/ol&gt;
                                  &lt;/div&gt;
                              `
                      });
  
                      // Root Vue instance
                      new Vue({
                              el: '#app'
                      });
  
                  }
              &lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>