Vue.js method is not defined

Question

Here is some problem with methods, my component can't access to methods. May i need to pass methods like prop to component ?

here is my html:

<guests v-bind="guests"></guests>

here is component in my js file

var guestsComponent = Vue.component("guests", {
  props: ['adultCount', 'childCount'],
  template: `
    <div class="guests-total">
      <div>
      <a @click="decrementAdult"></a>
      <a @click="incrementAdult"></a>
      <input type="text" placeholder="adults"/> {{adultCount}}
      </div>
    </div>
  `
});

and here in the same js file my vue init and methods

var app = new Vue({
  el: "#search",
  components: {
    "guests": guestsComponent
  },
  data() {
    return {
      guests: {
        adultCount: 0,
        childCount: 0
      }
    };
  },
  methods: {
    decrementAdult() {
      this.guests.adultCount++
    },
    incrementAdult() {
      this.guests.adultCount--
    }
  }
});

I can access to data without problem when i use the props but i don't know how i can pass methods like props or this is needed?

here is error on console:

ReferenceError: decrementAdult is not defined
    at o.eval (eval at xa (vue.min.js:NaN), <anonymous>:3:88)
    at o.fn._render (vue.min.js?f6b5:6)
    at o.eval (vue.min.js?f6b5:6)
    at St.get (vue.min.js?f6b5:6)
    at new St (vue.min.js?f6b5:6)
    at o.hn.$mount (vue.min.js?f6b5:6)
    at o.hn.$mount (vue.min.js?f6b5:6)
    at init (vue.min.js?f6b5:6)
    at eval (vue.min.js?f6b5:6)
    at b (vue.min.js?f6b5:6)

You don't have a decrementAdult method in your guests component definition. Either move that method to the guests component or emit an event from the child component (<a @click="$emit('decrement')"></a>) that the parent component can handle by calling that method (<guests v-bind="guests" @decrement="decrementAdult"></guests>). — thanksd
– thanksd, Commented Dec 5, 2018 at 14:50

Boussadjra Brahim · Accepted Answer · 2018-12-05 14:51:00Z

2

Since the click events are done in the child component guests you should emit an event to the parent component and handle it there like :

    ....
    <a @click="$emit('decrement-adult')"></a>
     ...

in the parent component do :

   <guests v-bind="guests" @decrement-adult="decrementAdult"></guests>

answered Dec 5, 2018 at 14:51

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3348410 Over a year ago

thanks its worked too:) but it will be like that @decrement-adult="decrementAdult()">

Boussadjra Brahim Over a year ago

if you're not passing parameters the () are not needed

flyingfishcattle · Accepted Answer · 2022-10-25 17:07:15Z

1

I ran into a similar 'method1' is not defined error from the following code section:

methods: {
    method1(){
      console.log("running method1()");
    },
    method2(){
      method1();
    },
    ...

The problem was that the reference to method1() should have included the this keyword like so:

export default {
  name: 'TuringMachine',
  props: {
    msg: String,
  },
  data() {
  },
  methods: {
    method1(){
      console.log("running method1()");
    },
    method2(){
      this.method1();
    }
  }
}

Hope this helps anyone with the same issue.

answered Oct 25, 2022 at 17:07

flyingfishcattle

2,2213 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vue.js method is not defined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related