Я использую Laravel. Есть 2 компонента Vue, которые обмениваются через шину событий. "Order.vue" и "Balance_Label.vue" .
Когда я нажимаю кнопку «Заказ» , Баланс уменьшается на сумму заказа, и метка баланса обновляется немедленно (через Axios).
Взаимодействие между этими двумя компонентами осуществляется через Event Bus и работает хорошо.
Но после обновления страницы я вижу такие 2 предупреждения в консоли:
[Vue warn]: свойство или метод "updatebalance" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. Смотри: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
найдено в Root)
[Vue warn]: неверный обработчик для события «updbalance»: получил неопределенный
нашел в
---> в ресурсах / активах / js / components / Balance_label.vue
Корень
Я бы не обращал внимания на эти предупреждения, так как все работает как надо, но после команды:
нпм запуск производства
есть ошибка:
**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> 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"
}
}
П.С .: без автобуса тоже получено то же предупреждение, поэтому автобуса нет - не важно
Я нашел эту тему но это не помогает ...
что я пытался сделать, чтобы решить проблему:
- объявить метод в корневом элементе vue ( app.js file),
- объявить метод в шине событий ( boostrap.js файл)
- объявить метод в order.vue
но ошибка не уходит ... помогите пожалуйста ...
Я читал много тем в stackoveflow: все они о свойствах, но не о методах ...