title: Vue.js pass function as prop and make child call it with data
body: <p>I have a posts list component and a post component.</p>
  
  <p>I pass a method to call from the posts list to the post component, so when a button is click it will be called. </p>
  
  <p>But I want to pass the post id when this function is clicked</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let PostsFeed = Vue.extend({
      data: function () {
          return {
            posts: [....]
          }
      },
      template: `
        &lt;div&gt;
          &lt;post v-for="post in posts" :clicked="clicked" /&gt;
        &lt;/div&gt;
      `,
      methods: {
        clicked: function(id) {
          alert(id);
        }
      }
    }
                             
    let Post = Vue.extend({
      props: ['clicked'],
      data: function () {
          return {}
      },
      template: `
        &lt;div&gt;
          &lt;button @click="clicked" /&gt;
        &lt;/div&gt;
      `
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>as you can see in Post component you have a click that runs a method he got from a prop, I want to add a variable to that method.</p>
  
  <p>How do you do that?</p>