Breaking News: Grepper is joining You.com. Read the official announcement!

How to pass methods in vue js

Dark Deer answered on November 22, 2021 Popularity 8/10 Helpfulness 2/10

answer How to pass methods in vue js

How to pass methods in vue js

Comment

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
  }
});

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript methods

Link to this answer
Share Copy Link

Contributed on Nov 22 2021

Dark Deer

0 Answers Avg Quality 2/10

How to pass methods in vue js

Contents

More Related Answers

How to pass methods in vue js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.