组件事件：属性或方法 "updatebalance" 未定义

Question

我用Laravel。有 2 个 Vue 组件通过事件总线交换。 "Order.vue" 和 "Balance_Label.vue"。当我点击 "Order" 按钮时，余额减少订单金额，余额标签立即更新（通过 Axios）。这两个组件之间的交互是通过 Event Bus 实现的，并且运行良好。但是在更新页面后，我在控制台看到了这样的 2 个警告：

[Vue warn]: 属性或方法 "updatebalance" 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。在根中找到)

[Vue 警告]：事件处理程序无效 "updbalance"：未定义在发现 ---> 在 resources/assets/js/components/Balance_label.vue 根

我不会注意这些警告，因为一切正常，但在命令之后： npm 运行生产 有一个错误：

**ReferenceError: updatebalance is not defined
    at dn.eval (eval at Ca (app.js:1), <anonymous>:3:465)
    at dn.t._render (app.js:1)
    at dn.<anonymous> (app.js:1)
    at Ie.get (app.js:1)
    at new Ie (app.js:1)
    at app.js:1
    at dn.$mount (app.js:1)
    at dn.$mount (app.js:1)
    at dn.t._init (app.js:1)
    at new dn (app.js:1)**

在页面上我只看到背景，没有组件...

朋友们，请帮忙！我用谷歌搜索了 3 天，但无济于事。各种办法都试过了，还是报错

"balance label"是这样渲染的：

<balancelabel @updbalance="updatebalance"></balancelabel>

"Order" 按钮 呈现如下：

<order
           :product={{ $product->id }}
           :ordered={{ $product->ordered() ? 'true' : 'false' }}
           productname= "<b>{{ $product->name }}</b>"
></order>

Balance_label.vue

<template> 
        <label id="balance_view" class="btn btn-default tp-icon chat-icon">
                    {{ balance }}  dollars     
        </label>
</template> 

<script>
    import { bus } from '../bootstrap';
    import 'vuejs-noty/dist/vuejs-noty.css'
    export default {

        data: function () {
            return {
                balance: 0
            }    
        },

        created(){
            bus.$on('updbalance', (data) => {
               this.updatebalance(); 
            });
        },
        mounted : function() {

            this.updatebalance();

        },

       methods: {

            updatebalance: function (){

            axios
                .get('/api/v1/balance')
                .then(response => {
                    this.balance = response.data.data[0][0]
                })        
                .catch(response => console.log(response.data));
             },

        }
    };
</script>

Order.vue

<template> 
        <span>
            <button v-if="isOrdered" 
                @click.prevent="unOrder(product)" 
                type="button" 
                class="btn btn-block btn-warning btn-xs" 
                name="order-button">
                    <i class="fa fa-heart"></i>&nbsp; Cancel Order
            </button>
            <button v-else-if="!isOrdered" 
                @click.prevent="order(product)" 
                type="button" 
                class="btn btn-block btn-success btn-xs" 
                name="order-button">
                    <i class="fa fa-heart-o"></i>&nbsp; Order
            </button>
       </span>    
 </template> 

<script>
    import { bus } from '../bootstrap';
    import 'vuejs-noty/dist/vuejs-noty.css'
    export default {
        props: ["product", "ordered", "productname", "resp"],

        data: function() {
            return { 
                isOrdered: '',
            }
        },

        mounted() {
            this.isOrdered = this.isOrder ? true : false;
        },
        computed: {
            isOrder() {
                return this.ordered;
            },
         },
        methods: {

            order(product) {
            axios
                .post('/order/' + product)
                .then(response => {this.isOrdered = true;
                                   this.$noty.success("The product " + this.productname + " is Ordered!");
                                   bus.$emit('updbalance'); //send update balance event
                                   })
               .catch(response => console.log(response.data));
            },

            unOrder(product) {
             axios
                .post('/unorder/' + product)
                .then(response => {this.isOrdered = false;
                                   this.$noty.warning("The product order " + this.productname + " cancelled"); 
                                   bus.$emit('updbalance'); //send update balance event
                                   })
                .catch(response => console.log(response.data));
            }
         }
    };
</script>

app.js

require('./bootstrap');
window.Vue = require('vue');

Vue.component('order', require('./components/Order.vue'));
Vue.component('balancelabel', require('./components/Balance_label.vue'));

app = new Vue({
    el: '#app',
});

bootstrap.js

window._ = require('lodash');
try {
      require('bootstrap-sass');
} catch (e) {}

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

window.Vue = require('vue');
window.events = new Vue();

import Vue from 'vue'
import VueNoty from 'vuejs-noty'

//connect event bus
export const bus = new Vue();

Vue.use(VueNoty)

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.17",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.2.0",
    "jquery": "^3.2",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.16"
  },
  "dependencies": {
    "noty": "^3.2.0-beta",
    "sweetalert": "^2.1.0",
    "vuejs-noty": "^0.1.3"
  }
}

P.S.: without a bus, 也收到了同样的警告，所以没有bus - 没关系

我找到了但没有用...

我尝试解决问题的方法：

在vue的根元素中声明方法（app.js文件），
在事件总线中声明一个方法（boostrap.js 文件）
在order.vue

但错误并没有消失...请帮忙...

我在 stackoveflow 上阅读了很多主题：所有主题都是关于属性的，但不是关于方法的...

Answer 1

为什么在 Balance_label.vue 中声明方法时要尝试将 updatebalance 作为事件传递？如果删除 @updbalance="updatebalance"

会发生什么

组件事件：属性或方法 "updatebalance" 未定义

Components Events: Property or method "updatebalance" is not defined

html

javascript

json

laravel

vuejs2

组件事件：属性 或方法 "updatebalance" 未定义

Components Events: Property or method "updatebalance" is not defined

html

javascript

json

laravel

vuejs2

组件事件：属性或方法 "updatebalance" 未定义