Failed to pass through invalid parameters "recordIds", "datasources" while navigating in VUE

While working with Vue, I encountered an issue when trying to pass parameters from one route to another. Here is what my target route looks like:

{
   path: '/record-modification',
   name: 'recordModification',
   component: recordModification,
   meta: { needAuthentication: true, needCaseId: true }
}

This is how I am sending data to the route:

this.$router.push({
     name: 'recordModification',
     params: {
         recordIds,
         datasources
     }
});

However, on the target page, when I try to access this.$route.params, it returns an empty object. Can anyone provide insight into what mistake I might be making here?

Answer №1

update parameters to query string:

this.$router.push({
     name: 'modifyRecord',
     query: {
         recordIDs,
         sources
     }
});
and make sure to update the parameter access in 'modifyRecord' as well:

 $route.query.recordIDs

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

Do you have any queries regarding JavaScript logical operators?

I'm struggling with understanding how the && and || operators work in my code. I created a small program to help myself, but it's just not clicking for me. The idea is that when you click a button, the startGame() function would be triggered. va ...

Steps for loading spherical panorama image tile

Our web-based application features a spherical panorama loaded using Three.js. The texture is a 360-degree image, but as the image size increases, loading times suffer. We are interested in finding a solution to this issue by tiling the images into small ...

"Proper Installation of Angular Project Dependencies: A Step-by-Step

Whenever I clone an Angular project with older versions that are missing the node_modules folder, and then run npm install to install all necessary dependencies, I end up receiving numerous warnings and errors related to version mismatches. Here are some ...

Display the user's username on the navigation bar once they have successfully

I am having trouble displaying the username after logging in on the navbar. After logging in with the correct credentials, I am redirected to the page, but the navbar doesn't update with the username. Can someone provide some tips on what I should do ...

Converting a momentjs datetime stored in MySQL in UTC format to local DateTime format

I have a column in my table named "registerdate" with the data type "datetime" in MySQL. Let's assume the current time is "2015-10-10 06:00:00" in local time. In the database, I am storing UTC time, so it will be converted to "2015-10-10 00:30:00" a ...

Error: A problem occurred that was not caught in the promise, please investigate further

@Injectable() class MyErrorHandler implements ErrorHandler { handleError(error) { // an error occurred in a service class method. console.log('Error in MyErrorhandler - %s', error); if(error == 'Something went wrong'){ ...

The if-else statement doesn't seem to be functioning correctly once the else condition is included

I'm currently developing a search function for an address book that iterates through the contact array and displays them in a popup. Initially, it was working correctly by finding and displaying the contacts that were found. However, once I added the ...

Ending the Firefox browser using JavaScript

I have been trying to use the basic window close javascript command window.close(); but it seems to only work in IE and not in any other browser. Can anyone provide assistance on how to successfully close a browser tab in Firefox, Opera, or Chrome? Thanks ...

Interested in learning how to filter nested tables?

After successfully integrating a filter code snippet, I encountered an issue with the filter not recognizing data tables that can only be inserted as nested tables. Due to my limited knowledge of JavaScript/CSS, I'm unsure if this problem can be resol ...

React.map does not retrieve the specific value

I am facing an issue with my list of items. I have implemented it using mui list, and I have also added a button for editing the list. However, when I click on an item, I am getting the value of the last item instead of the one I clicked on. Below is my f ...

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

Guide on establishing a connection with a TCP server and sending a JavaScript script to it

I am completely new to JS and node. I am using SkyX Pro, a telescope management software that has the capability to run a TCP Server on port 3040. By connecting with Netcat and providing it with Javascript starting with //* Javascript *//, I can control ca ...

Navigational link behavior in the React component with the <tr> element

I am in the process of developing a React application with a component that shares a resemblance to the following: class TableRow extends React.Component { constructor(props) { super(props) } render() { const handleClick = () ...

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

In my nuxt application, I encountered a peculiar issue. When I execute npm run dev, everything functions properly. However, after running npm run build and then npm run start, I face the error message stating cannot GET [path of the page here] I noticed t ...

Tips on sending the total value of a form to a PHP script

Looking for help with a PHP script to calculate the sum of checked checkboxes with corresponding numeric values. For example, if checkbox 1 = 80; checkbox 2 = 21; and checkbox 3 = 15, and the user checks checkboxes 2 and 3, the PHP should output 36. I hav ...

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Currently, I am immersed in my inaugural full-stack app development project, which is aligning with an online course. Unfortunately, I have encountered a major stumbling block that has persisted despite hours of troubleshooting. The issue arises when I try ...

Incorporate JSON into the selection choices

After working with PHP for a while, I decided to start learning how to work with JSON. I managed to successfully create a PHP file that returns JSON data. In my main file, I referenced the PHP file and was able to retrieve the JSON objects. One of the thi ...

The elements within the Popup Modal are not displaying as expected

I found a helpful tutorial that teaches how to display a Popup Modal Window when the page loads. However, I'm facing an issue where the modal is not showing the contents and images properly. The code I am working on can be found at jsFiddle. My goal ...

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

Here is my HTML form: <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);"> <div class="clear"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="form ...

Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling. Big thank you! The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which i ...