/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

2 votes351 views1 answer
Vue local storage delete
Javascript Vue
0 vote353 views1 answer
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
Javascript Vue
0 vote342 views1 answer
Vue js link image link in props doesnt work
Javascript Vue
2 votes384 views2 answers
Vue js redirect to external url new tab
Javascript Vue
0 vote367 views1 answer
VueJS - check strings is includes in vuejs
Javascript Vue
1 vote365 views1 answer
Vue js access data in method
Javascript Vue
0 vote354 views2 answers
Create a vue project from scratch with 2.9.6
Javascript Vue
0 vote378 views1 answer
Vue can't refresh after change vmodel data
Javascript Vue
6 votes361 views1 answer
Vuejs set
Javascript Vue
0 vote343 views1 answer
How to replace an array vue.js
Javascript Vue