CODEWITHSUNDEEP
vue.js
mbsabab
mbsabab

Reputation: 33

Property or method ... is not defined on the instance but referenced during render

I am writing a sample Vue component that works with an Event.

I get this error by rendering the index.html: "Property or method "onCouponApplied" is not defined on the instance but referenced during render" in the console.

index.html

<div id="root">
    <coupon @applied="onCouponApplied"></coupon>
</div>

and below is Vue codes

main.js

window.Event = new Vue();

Vue.component('coupon',{
    template: `<input placeholder="Enter" @blur="onCouponApplied">`,
    methods:{
        onCouponApplied() {Event.$emit('applied');}
    }
})

new Vue({
    el:"#root",
    created() {
        Event.$on('applied', ()=>alert('Received'));
    },
});

Upvotes: 1

Views: 1433

Answers (1)

Renaud
Renaud

Reputation: 1300

First, Vue template code doesn't belong in index.html: <div id="root"></div>

Then you're mixing up event-bus and normal custom Vue events. It's either:

window.Event = new Vue();

Vue.component("coupon", {
  template: `<input placeholder="Enter" @blur="onCouponApplied">`,
  methods: {
    onCouponApplied() {
      Event.$emit("applied");
    }
  }
});

new Vue({
  el: "#app",
  template: `<coupon></coupon>`,
  created() {
    Event.$on("applied", () => alert("Received"));
  },
});

or:

Vue.component("coupon", {
  template: `<input placeholder="Enter" @blur="$emit('applied')">`,
});

new Vue({
  el: "#app",
  template: `<coupon @applied="onCouponApplied"></coupon>`,
  methods: {
    onCouponApplied() {
      alert("Received");
    }
  }
});

Upvotes: 1

Related Questions