Question

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

[Vue警告]：属性或方法“ updatebalance”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。根目录中找到

[Vue警告]：事件“ updbalance”的无效处理程序：未定义在发现 --->在资源/资产/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天，但无济于事。尝试了各种解决方案，但错误仍然相同。

“余额标签” 的呈现方式如下：

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

“订购”按钮呈现如下：

<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 .：同样没有公共汽车，也收到了相同的警告，因此没有公共汽车-没关系

我发现了this topic，但没有帮助...

我试图解决的问题：

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

但错误不会消失...请帮助...

我在stackoveflow上阅读了很多主题：所有主题都与属性有关，而与方法无关...

Answer 1

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

会发生什么？

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

1 个答案: