What is the best way to utilize JavaScript variables that are declared on index.html/index.jsp in Vue.js?

Just starting out with Vue.js and I recently finished developing a Vue.js app using the terminal. I then deployed it on a Java web application and noticed that everything works fine when running it as is.

However, I now need to pass a csrftoken to my Vue.js app. Initially, I hardcoded the token by setting 

Vue.prototype.$csrfToken = '*************************';
. Now, I realize that this approach isn't ideal as the token needs to be dynamic and fetched from the Java response session.

I attempted to define a global variable in the index page like - 

var token = '<%= request.getSession().getAttribute("token") %>';
and then assign this variable in the Vue.js file using: 
Vue.prototype.$csrfToken = token;
.

Unfortunately, this method doesn't seem to work. Any ideas on how to tackle this issue effectively?

javascriptjspvue.jsvuejs2

Answer №1

It seems that the issue might lie within your environment. Here is a checklist to help pinpoint the error:

  • Ensure that the javascript code var token = '****' is present in your html source code (caching or a bug could be causing interference)
  • Be sure to check for any errors occurring during the initialization of token or modification of Vue.prototype
  • Verify that 
    Vue.prototype.$csrfToken = token;
    is executed after the global variable has been initialized: it's possible that your Vue script is being included before the global variable is set.

Additionally, I want to mention that the pattern you are using may not be recommended. Please refer to the official Vue docs for guidance on the usage of Instance Properties

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

Why is the type of parameter 1 not an 'HTMLFormElement', causing the failure to construct 'FormData'?

When I try to execute the code, I encounter a JavaScript error. My objective is to store the data from the form. Error Message TypeError: Failed to create 'FormData': argument 1 is not an instance of 'HTMLFormElement'. The issue arise ...

javascriptreactjsformsnext.jsform-data

Display a particular element when hovered over

Is there a way to make only individual elements pop up on hover instead of all of them at once? items: [{ item: "Book", info: "Lorem ipsum", displayInfo: false }, { item: "Pen", info: "Lorem ipsum", displayInfo: false }, ...

javascriptvue.js

Expanding functionality: Steps to integrating a new endpoint into your AWS Amplify Express Server

I have created a REST express server using Amplify. Attempted to include two additional endpoints: // incorporating serverless express app.post('/myendpoint', function(req, res) { console.log('body: ', req.body) res.json(req.body) ...

javascriptamazon-web-servicesrestexpressaws-amplify

Showcasing an HTML table using Material-UI

Currently, I have a list of issues being displayed in my browser using the material-ui code below: <Paper className={classes.root} elevation={4}> <Typography type="title" className={classes.title}> All Issues </Typography> ...

javascriptreactjshtml-tablematerial-ui

Locate a specific option that matches the value of the selected data-status and set it as "selected" using jQuery

Currently, I am facing an issue where I need to load 2 separate ajax responses into a select dropdown. The select dropdown will have a data-status attribute, and my goal is to loop through the options to find the one that matches the value of the select da ...

javascriptjqueryajax

Creating an Array module in Node JS

Adding a prototype to the Array class can be done in native javascript with the following code: var myArray = Array; myArray.prototype.myMethod = function(){} var testArray = new myArray(); testArray.contains(); Now I need to achieve this using a nod ...

javascriptnode.jsmodule

What is the process behind executing the scripts in the jQuery GitHub repository when running "npm run build"?

Check out the jQuery repository on GitHub. Within the jQuery repo, there is a "build" folder. The readme.md mentions the npm command: npm run build This command triggers the execution of scripts in the build folder to complete the building process from ...

javascriptnode.jsnpm

The Electron forge project from publisher-github is failing to detect the environment variable GITHUB-TOKEN

I've set up my .env file with the correct token, but I encountered an error when trying to publish my package on GitHub. An unhandled rejection has occurred inside Forge: Error: Please set GITHUB_TOKEN in your environment to access these features at n ...

javascriptgithubnpmelectron-forge

Replicate and modify the settings on a fresh radio inspection

In my approach, I am avoiding direct HTML editing and instead utilizing JavaScript/jQuery to accomplish the desired outcome. Initially, one input (specifically 'Express Shipping') is pre-selected by default. The goal is to clone/copy the HTML co ...

javascriptjqueryclone

An error occurred while attempting to create-react-app, with the message "npm ERR! cb() never called!" popping up during the process

Encountering difficulties when attempting to create a React app PS D:\Projects\Test> npx create-react-app my-app Creating a new React app in D:\Projects\Test\my-app. Installing packages. This may take a few minutes. Installing ...

javascriptnode.jsreactjsnpm

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

I have implemented a data table from Vuetify in my project: <v-data-table :ref="`sortableTable${index}`" class="items-table-container" :headers="headers" :items="category.items" hide-default-footer> ...

cssvue.jsvuetify.js

Access the $event object from an Angular template selector

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <input type="file" #myFile multiple /> <button (click)="onDelete(myFile.event)">DeleteFiles</button> My code snippet is experienci ...

javascriptangulartypescript

What is the best way to implement client side validation for a related input field using JavaScript in a Rails application?

Struggling to find a solution for adding a validation check for a dropdown list that is dependent on another input selection in a different form. It seems like database validation may be necessary, but I'm unsure of the best approach. Any suggestions ...

javascriptjqueryruby-on-railsvalidation

Change the name of "rows" in the findAndCountAll method of Sequelize

Is there a way to change the key name for result.row when utilizing findAndCountAll in Sequelize? For pagination purposes, I am implementing findAndCountAll. The data structure I receive is as follows: { "count": 8, "rows": [ { ...

javascriptnode.jsexpresssequelize.js

Variable in Javascript file causing return value to be 'undefined'

I have encountered an issue with my JavaScript file. It is extracting data from a SharePoint list and displaying it on an HTML page, but one of the fields appears as 'undefined' even though I defined it initially. The problematic variable is &ap ...

javascriptjson

Having trouble with pm2 starting up correctly?

I have encountered an issue while trying to launch a nodejs application in pm2 on bluehost shared hosting. When I run the command pm2 start ./bin/www, the server fails to start and displays the following message: [PM2] Spawning PM2 daemon with pm2_home=/h ...

javascriptnode.jspm2

Sending a cookie token to the server through the header

This is my first attempt at working with a server Utilizing React and express Storing token in browser cookie from the server //Upon login request res.cookie('token', token, {maxAge: 3600000} ).json({ user: userDoc, message: 'message!&apos ...

javascriptreactjsexpressbackend

Learn the process of adding a tag to specific text with the help of JavaScript

I am attempting to implement a feature where the selected text will have a tag added to it. Within a textarea, I have some text entered. The goal is that when I select specific text from the textarea and click a code button, it should insert the tags aro ...

javascripthtml

Implement concrete actions on the right-click context menu

I am exploring the functionality of this right-click context menu. Visually, it appears as expected, but I am unsure how to implement actual actions when the menu items are clicked. Currently, it only displays a message like "Back menu item was clicked - t ...

javascriptjquerycontextmenu

Using Vue.js, transitions are implemented selectively on certain views

In my vuejs application, I have set up transitions between pages in App.vue. Here is an example of how it looks: <template> <div class="container mb-auto"> <router-view v-slot="{Component}" > <transition ...

vue.js