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

Storing JSON data in Sequelize

I am faced with the task of saving a json object sent by a client into a database. Although the application can handle requests successfully, I am encountering difficulties in storing the request data in the database, using sequelize. Here are my models: ...

The CORS policy specified in next.config.js does not appear to be taking effect for the API request

I am currently working on a Next.js application with the following structure: . ├── next.config.js └── src / └── app/ ├── page.tsx └── getYoutubeTranscript/ └── getYoutubeTranscript.tsx T ...

What is the best way to retrieve a value from a deeply nested callback function?

I am currently using the mssql npm library and it's functioning well. However, I'm facing difficulty retrieving the recordset returned from the sub-level callback function. Could someone guide me on how to obtain the recordset when dealing with ...

Is there a way to delete a particular table using sequelize in my project?

I'm facing a challenge in dropping a specific table from my database using Sequelize. Every time I try to do it, it ends up deleting all tables instead of just the one named CategoryName that I have defined. I've attempted different approaches ...

Having trouble loading popper.js using Laravel mix and webpack

I have been working on my project with Bootstrap 4 beta and Laravel 5.4, using npm and Laravel mix to load my JavaScript dependencies. Everything was going smoothly until I encountered an error while trying to use Bootstrap JavaScript methods. The error me ...

React's constructor being invoked twice

As a newcomer to react, I am in the process of developing a simple web application but encountering an issue. It seems like my Constructor is being called twice when I load a class component. Can anyone provide some assistance? Home.js import React from ...

Generating a fresh array based on the size of its existing elements is the key feature of the ForEach method

When running this forEach loop in the console, it extracts the property "monto_gasto" from an array of objects in the firebase database. Here's how it looks: something.subscribe(res => { this.ingresos = res; ...

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

Retrieve information from a database in real-time using Ajax without needing to set a refresh interval

Currently, I have been working on jquery/ajax requests and have managed to create an ajax request that retrieves data from a database. However, the issue at hand is that I am continuously utilizing window.setInterval() to refresh this function every x seco ...

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

In my implementation using node.js, I have set up a websocket server and client. The handshake process between the server and client appears as follows: Request URL: ws://localhost:8015/ Request Method: GET Status Code: 101 Switching Protocols Request ...

Preventing parent click events in AngularJS when clicking on a child element: Tips and tricks

I am facing an issue with a <div> that has a ng-click directive, but this <div> contains a child element also with a ng-click directive. The problem arises when the click event on the child element also triggers the click event of the parent el ...

JavaScript button not responding to click event

Here is the initial structure that I have: <section id="content"> <div class="container participant"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> ...

Enhancing functionality by integrating Jquery/JS with input fields and labels

I am currently facing a challenge in applying CSS to the label element when the corresponding input is selected. After attempting and failing to use input:checked + label due to limitations in the HTML structure that cannot be altered, I seek alternative ...

Changing the function to operate asynchronously

How can I convert the following code into an asynchronous function? It is currently returning referralUrl as undefined: controller async createReferralUrls() { this.referralUrl = await this.referralService.generateReferralUrl(this.userData.referral ...

Issues with Formik sign-up

Working on a study project involving React, Typescript, Formik, and Firebase presents a challenge as the code is not functioning correctly. While authentication works well with user creation in Firebase, issues exist with redirection, form clearing, and da ...

Tips for converting JSON object values to a string using JavaScript

Consider the following JSON object: { "id": 1, "name": "Name", "surname": "Surname", "number": "111111111" } Is there a way to transform this JSON object into a string that formats it as follows using JavaScript? Name Surname 111111111 ...

Comprehending the nuances of Sequelize hooks: Returning versus Attaching

Currently, I am participating in a workshop at my school that focuses on integrating Sequelize with Express. In one of the sections, we are delving into utilizing hooks within our models. This particular excerpt posed a challenge for me: Returning vs. Att ...

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

An error has arisen in a Nextjs app with TypeScript, specifically in the line of my react component which can be found here. This is my inaugural package creation and after several trials, I managed to test it successfully in a similar vite and TypeScript ...

What modifications need to be made to the MEAN app before it can be deployed on the server?

Following a tutorial on Coursetro, I was able to successfully build an Angular 4 MEAN stack application. However, when it comes to deploying the app on a server running on Debian-based OS, I am facing some challenges. The application should be accessible o ...