Question

我有一个模态对话框，试图在Vue应用程序实例上使用方法但是收到错误

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.

应用声明

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

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

Sale.vue组件暂时最小化

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

sale组件只包含在主页

中

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

模态对话框工作正常，显示上面的文本输入但是上面的错误显示在控制台中，模糊事件没有调用方法。

它似乎与组件模板有关，因为我通过直接在主刀片页面中输入文本输入来成功测试模糊事件。

为什么它不以这种方式运作的任何想法？我在某个地方看到了关于它与<template>有关的评论，但它没有解释如何修复。

Answer 1

组件无法直接访问在其他组件或根Vue中声明的方法。

此代码的问题是在根Vue中声明了calcFees方法，但是您试图从Sale.vue组件中调用它。

有几种方法可以完成这项工作。一个是你可以将calcFees移动到组件。另一个是你可以向父母发送一个事件，无论它需要在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);
    }
  }
});

Vuejs模态组件不能引用方法

1 个答案: