Maintaining responsiveness while initiating an HTTP request in a separate component

Question

Maintaining responsiveness while initiating an HTTP request in a separate component

I have a specific app structure

<header-bar></header-bar>    

<bag :bag="bag"></bag>

<!--Main Section-->
<section class="MainSection">

    <div class="MainSection__wrap">
        <router-view 
            is="view" 
            transition="fade" 
            transition-mode="out-in"
            keep-alive
        >
        </router-view>
    </div>

</section>

Upon examination, there exist 2 components and a router view.

The router view displays products retrieved from an API, which can be added to the bag component.

In my products view (part of the router view), there is a method that adds items to the bag by making a POST HTTP Request to the server.

addToBag() {
   productService.add(this.item)
      .then(item => {
          console.log('success !)
      })
}

Currently, I am only able to see the items in the bag after reloading the page.

Although dispatching events could potentially solve this issue, the hierarchy of components does not permit me to use it.

javascript vue.js

Answer 1

Answer №1

When incorporating a new item on the server side, it is crucial to also update the item in the vm.bag dataset. One effective approach could involve utilizing Vuex for seamless integration. The primary objective here is to ensure that you can access the same "bag" from both your existing bag component and your "productService" or "addToBag" functionalities.

To achieve this synchronization, make the following adjustments within the component where the bag data is specified:

// Old Code
    /* inside component */
    data: function() {
        return {
            bag: []
        }
    }

// Updated Code
var state = {
    bag: []
}

    /* inside component */
    data: function() {
        return {
            bag: state.bag
        }
    }

Subsequently, leverage the identical bag array within your addToBag function:

addToBag() {
   productService.add(this.item)
      .then(item => {
          state.bag.push(item)
      })
}

Answer 2

When incorporating a new item on the server side, it is crucial to also update the item in the vm.bag dataset. One effective approach could involve utilizing Vuex for seamless integration. The primary objective here is to ensure that you can access the same "bag" from both your existing bag component and your "productService" or "addToBag" functionalities.

To achieve this synchronization, make the following adjustments within the component where the bag data is specified:

// Old Code
    /* inside component */
    data: function() {
        return {
            bag: []
        }
    }

// Updated Code
var state = {
    bag: []
}

    /* inside component */
    data: function() {
        return {
            bag: state.bag
        }
    }

Subsequently, leverage the identical bag array within your addToBag function:

addToBag() {
   productService.add(this.item)
      .then(item => {
          state.bag.push(item)
      })
}

Maintaining responsiveness while initiating an HTTP request in a separate component

Answer №1

Similar questions

What is the best way to include a parameter in the current URL in Django using Paginator?

Troubleshooting Vue.js 2: Difficulty with Vue locating files stored in the /assets directory (v-for loop)

What are the implications of a project containing nested node_modules directories?

Having trouble with the jQuery each function's functionality

Leverage the power of the React useFetch hook with an onclick/event

Utilizing the handleChange method to manage multiple input fields

Use jQuery to easily update the background of an iFrame

Tips for incorporating `new google.maps.Marker()` with `vue2-google-maps` are as follows:1. First

A guide on showcasing a value in an Input box using AngularJS

Using Jquery to dynamically add an active class to a link if it matches the current URL

Tips for consolidating JavaScript assets in Mean.io

The order of event handlers in jQuery

Running globally installed node modules on Windows 7 is not supported

Importing multiple exports dynamically in Next.js

What is the best way to ensure that messages stay saved in my app for an extended

The error "converting circular structure to json" occurred when trying to create a JSON web token, resulting in an unhandled TypeError

Align the fullcalendar to the present date

As soon as I inserted the image, the text vanished into thin air

Encountering invalid JSON response while making an API request

Autocomplete Dropdown failing to select default value when defaultValue option is set