Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

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

PREVIOUS NEXT
Code Example
Javascript :: function as object 
Javascript :: max value in an array 
Javascript :: multiple refs react 
Javascript :: property binding angular 
Javascript :: json in python 
Javascript :: promises in javascript 
Javascript :: history.pushstate 
Javascript :: append item to array javascript 
Javascript :: udpdate records using axios http put method 
Javascript :: babel minify plugin 
Javascript :: how to use .tolowercase 
Javascript :: jq not contains 
Javascript :: react query 
Javascript :: concate array to string javascript 
Javascript :: match if 
Javascript :: onchange vue 
Javascript :: module 
Javascript :: enable javascript chrome 
Javascript :: linkedlist javascript 
Javascript :: react native basic template 
Javascript :: break out of map javascript 
Javascript :: vuex store in js file 
Javascript :: loop through an array 
Javascript :: Getting One Value from an Array of Items 
Javascript :: scss variables in react 
Javascript :: What is cookies, sessionStorage, localStorage. 
Javascript :: javascript map() method 
Javascript :: react animations 
Javascript :: JavaScript for...of loop 
Javascript :: create react app 
ADD CONTENT
Topic
Content
Source link
Name
5+8 =