What is the best way to retrieve data in Vue from Node.js?

app.js

router.get('/', (req, res) => {
    var cart = req.cookies.cart;
    res.sendFile(path.join(__dirname,'../../src/components/cart.html'),cart);
})

shoppingCart.html

<body>
    <div id="shop" class="container mt-3">
        <h2> Shopping Cart View </h2>
    </div>
</body>

<script>
    new Vue({
        el: '#shop',
        data: {

        }
    })
</script>

I am looking to access cookies in vue..

How can I retrieve the 'cart' data in Vue?

Is using res.send('../cart.html',cart) the correct way?

Answer №1

To retrieve data, you must make a request from Vue to your server. Consider using axios for this purpose.

However, if you find yourself sending cookies to the server and then trying to receive cookies back in the response, consider an alternative approach. You can access cookies directly on the front-end without making a request by utilizing js-cookie.

Cookie.get('cart')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing Bull Queue from automatically re-starting jobs upon server restart

Currently, I am utilizing the bull queue system for processing jobs. Imagine a scenario where a job is in progress with an active status and I restart my development server. Upon restarting the worker script, the job remains in the active state within the ...

Is the user consistently experiencing redirection to a failure page with passport?

I've been struggling with the user login redirection issue on my website. No matter what changes I make, it keeps redirecting to failure instead of success. I'm not sure if I missed something or did something wrong. The documentation for passport ...

Using the bootstrap-vue library to create a dropdown menu within a div element

Bootstrap-vue is not really my favorite, and I'm having some issues. Is it possible to create something like this without using bootstrap-vue? <div class="dropdown open"> <div data-toggle="dropdown" class="dropdown-toggle">some text&l ...

What is the proper procedure for entering data in the correct sequence using JavaScript?

I am currently utilizing Node.js to send data to a SQL Server table. Within the code, there is a for loop that calls a function triggering an insert statement (which will eventually transition to being a stored procedure). This loop iterates through variou ...

Storing information in a session within a callback function using Node.js Express

Within the following code snippet, my goal is to retrieve user information from the database and store it in a session. However, I am encountering an issue where the data is not being properly saved into the session variable as expected. Could this be du ...

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

As a newcomer to next.js, my goal for my project is to connect to a database, retrieve data, process it using express, and then utilize it on the client side of my application. I plan to establish a connection to the database within the express route han ...

JavaScript - Assigning the same value to 2 properties but console log displays them as distinct values

While iterating through an array of documents, I am encountering a strange issue where setting two properties to the same value results in them having different values when logged using console.log. Here is the code snippet: this.logicItem.$promise.then( ...

What causes React JS to continuously render in an infinite loop when using hooks and useState

I am struggling with updating the current state of my component based on a result using a custom hook in React. Whenever I try to update it, I end up in an infinite loop rendering due to my usage of the useState() hook. I am still new to working with Rea ...

The mediator's location becomes uncertain after the route is manually adjusted

Currently, I am working on developing a single-page-application that utilizes passport local authentication. The user is authenticated and returned within the app.post "/login" route. Once the user object is obtained, I store it in Chaplin.mediator.user (s ...

Injecting a service into an Angular constant is a straightforward process that involves

Is it possible to define a constant that utilizes the $locale service? Since constants are objects, injecting them as parameters like in controllers is not an option. How can this be achieved? angular.module('app').constant('SOME_CONSTANT&a ...

What is the best way to combine a hyperlink with a string in an Angular form?

Currently I am in the process of learning angular and experimenting with creating a list of websites that can be clicked on, similar to what you would find in a bookmark app. This is based on a todo example. https://github.com/LightYear9/ToDoList In orde ...

Emberjs promises are enhanced with a filtering feature

My goal is to develop a search functionality using a JSON API. After following tutorials and successfully implementing it with provided examples: export default Ember.ArrayController.extend({ searchText: null, searchResults: function(){ ...

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

Currently, I am facing a challenge in performing addition on currency prices stored as an array of objects. The issue arises from the fact that the currency type can vary among 3 different types within the array of objects. The main hurdle I encounter is ...

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

Tips for accessing the value of an unchecked checkbox in AngularJS

This is a snippet of HTML code: <p> <input type="checkbox" ng-model='add_product.kids' class="filled-in" id="filled-in-box1" /> <label for="filled-in-box1">Kids</label> </p> My goal is to obtain the value "fa ...

Mix up and present cards for a game of blackjack (Javascript)

Have you noticed why "card2" is randomly adding an object to the array? It should consistently add objects to the array. const cards=[ { card: '&#127137', value: '1' }, { card: '&#127138', valu ...

Implement the geocomplete feature following an ajax event

When I click a button, it adds an input box for entering an address. To assist with auto-completion of the address, I'm using the geocomplete plugin. However, I've noticed that the geocomplete functionality only works on input boxes generated wit ...

Position items at the center of the grid in material UI

I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance? Below is ...

Is it possible to transfer items from one list within a component to another list inside a different component with Vue draggable?

I am having trouble implementing Vue Draggable to move items between lists within a component setup. The issue I'm facing is that the items can be moved within a list, but not from one list to another. The structure involves a Board component that ho ...

Occasionally, the array of image icons fails to load, but this issue is

Currently, I am encountering an issue where my app icons are not loading properly on the screen. Most of the time, everything works fine with no errors. However, occasionally (about 1 in 20 times), the icons fail to load as expected, leaving only the app n ...