组件事件：未定义属性或方法“updatebalance”
Posted
技术标签:
【中文标题】组件事件：未定义属性或方法“updatebalance”【英文标题】：Components Events: Property or method "updatebalance" is not defined 【发布时间】：2018-12-06 17:06:37 【问题描述】：我使用 Laravel。有 2 个 Vue 组件通过事件总线进行交换。 “Order.vue” 和 “Balance_Label.vue”。 当我点击“订单”按钮时，余额会减少订单金额，并且余额标签会立即更新（通过 Axios）。 这两个组件之间的交互是通过Event Bus实现的，并且运行良好。 但是在更新页面后，我在控制台看到了这样 2 个警告：
[Vue 警告]：属性或方法“updatebalance”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。 在 Root 中找到）
[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>
<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>
<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> 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> 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>
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',
);
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)
"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 上阅读了很多主题：所有主题都与属性有关，但与方法无关……
【问题讨论】：
在 Balance_label.vue 中声明方法时，为什么要尝试将updatebalance 作为事件传递？如果删除 @updbalance="updatebalance" 会发生什么？
我通过 updatebalance 因为余额标签从订单按钮发出事件。当单击订单按钮时-“updbalance”事件开启。然后余额收到此事件并更新余额标签（减少余额金额）。如果我删除“updatebalance”所有算法停止工作。点击Order按钮后标签将停止更新
好的，问题解决了，我删除了@updbalance="updatebalance"。您可以将您的评论作为答案发表吗？
【参考方案1】：
当您在 Balance_label.vue 中声明方法时，为什么要尝试将 updatebalance 作为事件传递？如果您删除 @updbalance="updatebalance" 会发生什么
【讨论】：
以上是关于组件事件：未定义属性或方法“updatebalance”的主要内容，如果未能解决你的问题，请参考以下文章