Vue.js pass function as prop and make child call it with data : <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>
