CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user3348410
user3348410

Reputation: 2833

Vue.js method is not defined

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)

Upvotes: 1

Views: 4441

Answers (2)

flyingfishcattle
flyingfishcattle

Reputation: 2133

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.

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 2

Related Questions