Vuejs modal component cannot reference method

Question

I have a modal dialog which is trying to use a method on the Vue app instance but getting the error

app.js:32117 [Vue warn]: Property or method "calcFees" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

The app declaration

Vue.component('sale', require('./components/Sale.vue'));

const app = new Vue({
el: '#app',
data: {
    showModal: false
},
methods: {
    calcFees: function (event) {
        alert('GOOD');
    }
}
});

Sale.vue component minimised for now

<template name="sale">
    <input type="text" placeholder="Sale Price" class="form-control" @blur="calcFees">
</template>

The sale component is simply included in the main page here

<sale v-if="showModal"></sale>

The modal dialog works fine, displays the above text input however the above error is shown in the console and the blur event doesn't call the method.

It seems it has something to do with the component template, because i tested the blur event successfully by putting a text input in the main blade page directly.

Any ideas why it doesn't work in this way? I saw a comment somewhere about something to do with it being a <template> but it didn't explain how to fix.

Bert · Accepted Answer · 2017-06-18 06:18:19Z

3

Components cannot access methods declared in other components or the root Vue directly.

The problem with this code is that the calcFees method is declared in the root Vue, but you are trying to call it from the Sale.vue component.

There are several ways to make this work. One is you can move calcFees to the component. Another is you can $emit an event to the parent with whatever it needs to use in calcFees.

Sale.vue

<template name="sale">
    <input type="text" v-model="price" placeholder="Sale Price" class="form-control" @blur="onSale">
</template>

<script>
export default {
  data(){
     return {
       price: null
     }
  },
  methods: {
    onSale(){
      this.$emit('sale', this.price) 
    }
  }
}
</script>

Vue

<sale v-if="showModal" @sale="calcFees"></sale>

const app = new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    calcFees: function (price) {
        alert(price);
    }
  }
});

edited Jun 18, 2017 at 6:18

answered Jun 18, 2017 at 5:06

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

8 Comments

yoyoma Over a year ago

hmm i'm now getting

[Vue warn]: Property or method "price" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.  found in  ---> <Sale> at \components\Sale.vue        <Root>

Looks like i need to do some research regarding component scopes in vuejs

Bert Over a year ago

@yoyoma Sorry there was a small bug in my code. The data function of a component has to return an object. It's corrected in the answer.

yoyoma Over a year ago

uh thanks for sticking with it but still got same error but also now same error for "onSale" method, and then also [Vue warn]: Invalid handler for event "blur": got undefined

Bert Over a year ago

@yoyoma will have to see how you implemented to help from here. Post your code somewhere?

yoyoma Over a year ago

anything else in particular you need to see?

|

Collectives™ on Stack Overflow

Vuejs modal component cannot reference method

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related