The Process of Sending Values from app.js to a Vue File in Vue.js

Question

The Process of Sending Values from app.js to a Vue File in Vue.js

My app.js is currently receiving a value called gtotal. I am trying to pass this value to the orderForm.vue file but am facing some difficulties in achieving this.

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);
    });
  }
});

My goal in orderForm.vue is to assign the value of gtotal to an input field so that it can be saved to the Database.

<template>
  <input type="hidden" value="gtotal">
</template>

javascript laravel laravel-5 vue.js

Answer 1

Answer №1

Once you have set up your event bus, you can start listening for the openOrderForm event in the component that contains the order form:

<template>
  ...
    <order-form :total="total"></order-form>
  ...
</template>

export default {
  data () {
    return {
      total: 0
    }
  },
  created () {
    EventBus.$on('openOrderForm', (newTotal) => {
      this.total = newTotal;
    })
  }
}

In the order form component, make sure to define a prop for the total amount:

// orderForm.vue

<template>
  <input type="hidden" :value="total">
</template>

export default {
  props: ['total']
}

Answer 2

Once you have set up your event bus, you can start listening for the openOrderForm event in the component that contains the order form:

<template>
  ...
    <order-form :total="total"></order-form>
  ...
</template>

export default {
  data () {
    return {
      total: 0
    }
  },
  created () {
    EventBus.$on('openOrderForm', (newTotal) => {
      this.total = newTotal;
    })
  }
}

In the order form component, make sure to define a prop for the total amount:

// orderForm.vue

<template>
  <input type="hidden" :value="total">
</template>

export default {
  props: ['total']
}

The Process of Sending Values from app.js to a Vue File in Vue.js

Answer №1

Similar questions

extracting an attribute from a class's search functionality

Having difficulties fetching images from the Twitter API

Getting information from a PHP script using jQuery AJAX with the (webpack based) ZURB Foundation Framework

Express not invoking Passport LocalStrategy

The MUI5 drawer overlapping a modal dialog

What is the best way to send a string without using quotation marks as a parameter in a function?

Im testing the creation of a global style using styled-components

Unable to process JSON array

Having trouble with pm2 starting up correctly?

Fulfill the promise within the $stateProvider and proceed with utilizing the outcomes

Is it possible in Angular.js to limit the visibility of a service to only one module or to a specific group of modules?

What is the proper way to retrieve the JSON data?

When attempting to decrypt with a password using CryptoJS, AES decryption returns an empty result

Guide on sending files through an API request with formData() using Vuejs and Axios

Vue: A guide to fetching and displaying response data in a select dropdown using the vue-search-select component and axios

Having trouble with Firebase continuously replacing old images with new ones whenever I upload them using JavaScript/jQuery

The first three AJAX requests are successful, but the fourth one fails to reach the PHP script

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

I am trying to map through an array fetched from Firebase, but despite the array not being empty, nothing is displaying on the

Angular is used to call a function that captures a specific div and then waits for the capture to be completed before