Лейбл баланса
"Balance label" рендерится так на html-страничке:
<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> 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.jsrequire('./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.jswindow._ = 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"
}
}
