This is my app.js and it is getting value gtotal . I want to pass this value to my orderForm.vue file and I am not to do that.
require('./bootstrap');
window.Vue = require('vue');
window.EventBus = new Vue();
Vue.component('products', require('./components/products.vue'));
Vue.component('orders', require('./components/orders.vue'));
Vue.component('orderform', require('./components/orderForm.vue'));
const app = new Vue({
el: '#app',
data: {
viewOrderForm: false,
gtotal: 0
},
created() {
EventBus.$on('openOrderForm', (total) => {
this.viewOrderForm = true;
this.gtotal = total;
console.log(this.gtotal);
});
}
});
In orderForm.vue, I want to assign it to the input field value so that I can save it to the Database.
<template>
<input type="hidden" value="gtotal">
</template>
Since you've got an event bus set up, you can listen for openOrderForm
in the component which has the order form:
<template>
...
<order-form :gtotal="gtotal"></order-form>
...
</template>
export default {
data () {
return {
gtotal: 0
}
},
created () {
EventBus.$on('openOrderForm',(total)=>{
this.gtotal = total;
})
}
}
Your order form would just need a prop
for gtotal
:
// orderForm.vue
<template>
<input type="hidden" :value="gtotal">
</template>
export default {
props: ['gtotal']
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.