I use Laravel. There are 2 Vue components that are exchanged via the event bus. "Order.vue" and "Balance_Label.vue". When I click on the "Order" button, the Balance is reduced by the order amount, and the balance label is updated immediately (via Axios). The interaction between these two components is realized via the Event Bus and works well. But after updating the page I see such 2 warnings at Console:
[Vue warn]: Property or method "updatebalance" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in Root)
[Vue warn]: Invalid handler for event "updbalance": got undefined found in ---> at resources/assets/js/components/Balance_label.vue Root
I would not pay attention to these warnings, since everything works as it should, but after the command: npm run production there is an error:
**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)**
and on the page I see only the background, but there are no components...
Friends, help please! I googled for 3 days, but to no avail. Tried all sorts of solutions, but the error remains the same.
The "balance label" is rendered like this:
<balancelabel @updbalance="updatebalance"></balancelabel>
The "Order" button rendered like this:
<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> 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>
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, too, received the same warning, so there is no bus - it does not matter
I found this topic but it doesnt help...
what I tried to do to resolve problem:
- declare the method in the root element of the vue (app.js file),
- declare a method in the event bus (boostrap.js file)
- declare the method in the order.vue
but the error does not go away... help please...
I read many topics at stackoveflow: all of them about properties, but not about methods...
