/Javascript/Vue/How to pass methods in vue js

How to pass methods in vue js

let Post = Vue.extend({
  props: {
    onClicked: Function,
    post: Object
  },
  template: `
      <div>
        <button @click="clicked">Click me</button>
      </div>
    `,
  methods: {
    clicked() {
        this.onClicked({
        id: this.post.id
      });
    }
  }
});

let PostsFeed = Vue.extend({
  data: function() {
    return {
      posts: [
        {id: 1, title: 'Roadtrip', content: 'Awesome content goes here'},
        {id: 2, title: 'Cool post', content: 'Awesome content goes here'},
        {id: 3, title: 'Motorcycle', content: 'Awesome content goes here'},
      ]
    }
  },
  template: `
      <div>
        <post v-for="post in posts" :post="post" :onClicked="clicked" />
      </div>
    `,
  methods: {
    clicked(event) {
      alert(event.id);
    }
  },
  components: {
    post: Post
  }
});

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

Source: stackoverflow.com

Similar codes

0 vote239 views1 answer
Vue problem (You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file)
Javascript Vue
63 votes417 views4 answers
Install vue js
Javascript Vue
0 vote214 views1 answer
Vuerouter route grouping
Javascript Vue
10 votes210 views2 answers
Vuejs set default value for prop
Javascript Vue
0 vote200 views1 answer
Get base url vuejs
Javascript Vue
0 vote201 views1 answer
Vue await in component
Javascript Vue
0 vote217 views1 answer
How to find length of a assocative array vuejs
Javascript Vue
0 vote217 views3 answers
Rust zola vuejs
Javascript Vue
1 vote225 views1 answer
Vue js copy text to clipboard
Javascript Vue
2 votes236 views2 answers
Vuex use state in action
Javascript Vue