Vue.js pass function as prop and make child call it with data

Question

Normally, the click event handler will receive the event as its first argument, but you can use bind to tell the function what to use for its this and first argument(s):

:clicked="clicked.bind(null, post)

Updated answer: However, it might be more straightforward (and it is more Vue-standard) to have the child emit an event and have the parent handle it.

let Post = Vue.extend({
  template: `
      <div>
        <button @click="clicked">Click me</button>
      </div>
    `,
  methods: {
    clicked() {
      this.$emit('clicked');
    }
  }
});

let PostsFeed = Vue.extend({
  data: function() {
    return {
      posts: [1, 2, 3]
    }
  },
  template: `
      <div>
        <post v-for="post in posts" @clicked="clicked(post)" />
      </div>
    `,
  methods: {
    clicked(id) {
      alert(id);
    }
  },
  components: {
    post: Post
  }
});

new Vue({
  el: 'body',
  components: {
    'post-feed': PostsFeed
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<post-feed></post-feed>

Leave a Comment Cancel reply