Sending an array from one page to another with Vue

I'm facing the challenge of passing an array from one page to another. When accessing the next page on form submission using this.$router.push('path'), is there a way for me to also transfer the array so that it can be accessed on the new page?

Answer №1

Vue router does not support passing any type other than a String directly, as outlined in this response.

If you need to retrieve the data on another page, you have a few options:

  • Store it in cookies or localStorage (although this is not recommended)
  • Retrieve it from the submission: typically, the backend will provide a response with the necessary information
  • Utilize Vuex or some other state management tool that can be shared between the current and subsequent pages

Answer №2

When looking to avoid using vuex or other store managers, a straightforward approach is to implement the following:

this.$router.push('path').then(() => { this.$route.params.dynamicArray = ['value'] })

Subsequently, in the receiving component, access the same array by calling:

this.$route.params.dynamicArray

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

Utilizing EJS to display dynamic data from a JSON file in a visually appealing D

*Excited about learning express! Currently, I have two files - index.ejs and script.js. The script I've written successfully fetches JSON data from an api. const fetch = require("node-fetch"); const url = '...' fetch (url) .then(resp ...

Unable to retrieve jwt token from cookies

Currently, I am developing a website using the MERN stack and implementing JWT for authentication. My goal is to store JWT tokens in cookies. Despite invoking the res.cookie function with specified parameters (refer to the code below), I am facing difficul ...

An uncaught exception has occurred: An error was encountered indicating that the specified path is not valid for either posix or windows systems, and it appears that there is no 'join' method defined in the

I am currently working with nextjs version 13.5.6 using the app router and app directory. This issue arises during the compilation of the route app/(home)/page.js. The folder and file structure within the app folder is as follows: app/ -(home)/page.js -ser ...

Creating a webpage that loads directly to a specific section of content

After searching online, I couldn't find the solution I was looking for. My goal is to have the visible part of the page load halfway down the actual page. This way, when users visit the site, they can immediately scroll up to see more content. I hope ...

Ways to implement StackNavigator along with Redux?

Is there anyone who can assist me in integrating StackNavigator and Redux? It seems straightforward, but I'm encountering issues. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provi ...

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

Within my component, I have a video loaded in an i tag on a click event. The challenge is accessing the video ID from the video.component.ts file in order to dynamically load a new video. The solution has been elusive so far. <li *ngFor="let video of c ...

Is there a way to incorporate HTML code into a fullCalendar 4 event title?

Is it possible to add HTML content to an event title using eventRender in FullCalendar version 4? document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new ...

Tips for changing date format within Ajax javascript code

I am working with a JavaScript AJAX code: success:function(res){ var _html=''; var json_data=$.parseJSON(res.posts); $.each(json_data,function (index,data) { _html+='<span class=&apo ...

Error Encountered - Configuring Node.js Deployment on the Heroku Platform

"APPLICATION ERROR - Oops! Looks like something went wrong with the application and we couldn't load your page. Please give it another shot in a little while. If you are the app owner, make sure to review your logs for more information." Hey there - ...

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

Is there a way for me to determine if a domain has been registered by the client?

I'm interested in creating a Web app that allows users to enter a domain name and then uses JavaScript to check its availability. I'm wondering if there's a method to do this without relying on my own hosting server. Is it possible to send a ...

The function does not yield any result

import { Injectable } from '@angular/core'; export class Test { public id: number; public name: string; public fid: number }; export const TESTS2: Test[] = [ {id: 1, name: 'Lion', fid: 1}, {id: 2, name: 'Tiger', fid: 1 ...

Assign a custom value to the ng-options and ensure that the first option is selected by default

Hey there, I'm currently working on the following: $scope.test = [ {"value" : 0, "text" : "00:00"}, {"value" : 900, "text" : "00:15"}, {"value" : 1800, "text" : "00:30"} ]; and in my select element, this is what I hav ...

Ensuring Package Security in NodeJS and NPM

Given the immense popularity of NodeJS and how NPM operates, what measures can be taken to prevent the installation of insecure or malware-laden packages? Relying solely on user feedback from sources like StackOverflow or personal blogs seems to leave a si ...

The AJAX validation process fails to run prior to the execution of the login PHP script

My attempt to implement AJAX for form validation is not successful and I'm unsure why. Despite my efforts, the form still redirects to login_action.php instead of performing the AJAX validation as intended. I have designed a modal login form and wish ...

Error: The React Material-UI modal is encountering a type error where it cannot access the property 'hasOwnProperty' of an undefined value

Whenever I include a modal in one of my classes, I encounter this error. Error: Unable to access property 'hasOwnProperty' of undefined Here is a simple example where I am attempting to display a basic modal at all times. Any suggestions? I h ...

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

What is the best way to verify the existence of an email address?

I'm currently using the jQuery validation plugin and everything is working fine, but I've hit a snag when it comes to checking email addresses. The issue is that the plugin returns either true or false based on whether the email exists or not. Ho ...

Price Adjuster Tracker

Recently, I coded a small JavaScript program with the purpose of: incrementing or decrementing the quantity of an item by 1 adjusting the price of an item based on the initial price However, my excitement turned to disappointment when I encountered these ...

Is there a way to verify if an element possesses a specific style, and if so, alter the style of a different element accordingly?

Could you assist me in achieving a similar effect as demonstrated below: I have two menus (http://osiyo-nur.uz/osiyo-nur.uz/test6/), one of which is initially invisible. When I hover over the first menu, the second menu becomes visible with an overlay eff ...