Steps to confirm if a route has been passed a prop

Within the GridRow.vue file, I have a function that redirects to a specific route while passing along parameters:

    redirectWithData () {
        this.$router.push({
            name: 'payment.request',
            params: {
                periodFrom: this.data.periodFrom,
                periodTo: this.data.periodTo,
                receipt: this.data.receipt
            }
        })
    }

However, I am facing an issue where upon refreshing the page, these parameters are lost. I am unsure of how to retain these parameters in the new route, or how to verify if the route has received the parameters, redirecting to another route if necessary.

The parameters are received in the RequestPayment.vue component:

props: {
    periodFrom: String,
    periodTo: String,
    receipt: Number
}

Within the Vue router configuration, I have set props: true for RequestPayment.vue and attempted to implement a navigation guard without success:

{
    component: RequestPayment,
    name: 'payment.request',
    path: '/pagamentos/solicitar',
    props: true
}

Answer №1

If you want to utilize a parameter in Vue.JS with the router, you need to include it in the URL. Here's an example to demonstrate:

{
    /* router.js */
    component: RequestPayment,
    name: 'payment.request',
    path: '/payments/request/:startDate/:endDate/:receiptNumber',
    props: true
}

When Vue renders the component, it will match the props in the component with those from the route. This is why it's important to use the same prop names in both the router and the component.

If you find that the props are being passed or managed in a different manner, you may want to consider incorporating Vuex.

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

Guide to creating dynamic borders around your PHPexcel output

Looking for assistance on adding borders around output arrays in an Excel report using PHPexcel. I reviewed the documentation, but the examples are static, requiring a predefined number to set. My goal is to have all arrays transferred to Excel with bord ...

The Google Maps JavaScript API is displaying a map of China instead of the intended location

After multiple attempts, I am still facing an issue with setting up the Google Map on my website. Despite inputting different coordinates, it consistently shows a location in China instead of the intended one. Here is the code snippet that I have been usin ...

Setting up an object with a set expiration using NodeJS and Mongoose

Is there a way to create a temporary entity (like an ad) that will automatically expire after one month using NodeJS with MongoDB? An ideal comparison would be Instagram or Facebook Stories that only last for 24 hours. ...

Executing asynchronous actions with useEffect

Within my useEffect hook, I am making several API requests: useEffect(() => { dispatch(action1()); dispatch(action2()); dispatch(action3()); }, []); I want to implement a 'loading' parameter using async/await functions in the hook ...

What is the process for implementing an onAuthStateChanged function in Vue Native?

I am trying to achieve a similar functionality as shown below: export default class LoadingScreen extends React.Component { componentDidMount() { firebase.auth().onAuthStateChanged(user => { this.props.navigation.navigate(user ? 'App&ap ...

Achieving Dynamic Center Alignment of Filtered Node in SVG Using D3

I am currently implementing filter functionality for my d3 graph. The goal is to allow users to search for a specific node by label or ID, then re-render the graph to display the entire structure with the filtered node positioned at the center of the SVG e ...

Use npm to include a new dependency from the current dependency structure

I am currently working on a Vue application that utilizes both vuetable-2 and vue-axios. In my app.js file, I have the following imports: import Vue from 'vue' import VueMaterial from 'vue-material' import axios from 'axios' ...

Can JavaScript be used to mimic selecting a location from the autocomplete dropdown in Google Maps API 3?

Currently, I am attempting to automate the process of selecting items from the autocomplete dropdown in the Google Maps API v3 places library using jQuery. However, I am facing difficulty in identifying the necessary javascript code to select an item from ...

Is there a method to redirect and display a JavaScript message efficiently?

Once the user has updated a record, I want to automatically redirect them to another page where they will be notified with a JavaScript message (alertify.notify()) confirming that the update was successful. I am unsure if it's possible to dynamically ...

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

Could the php function json_encode() be a security risk if used within a script tag?

A while back, I had read OWASP's XSS Prevention Cheat Sheet and created a wrapper function that included JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP by default to ensure safety. However, a user on Freenode/##php pointed out that this approac ...

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

Ways to retrieve the value of an Object that may have a key that is undefined

Is there a method similar to Angular's $parse service that can be used for accessing nested object properties? Consider an object structure like this: const obj = { items: [ { store: { type: '' } } ] }; Sce ...

Loading screen featuring symbol percentage

https://i.sstatic.net/Ksogp.jpg How can I create a loading panel that includes a percentage symbol? I have searched for solutions but most of them suggest using a spinner. However, I specifically need a panel with the % symbol included. Is it possible to ...

Modifying radio inputs to update when a state variable is altered in react.js

In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...

The performance of Jquery Animate is acting strangely after the upgrade to version 1.11

Take a look at http://jsfiddle.net/integerz/k19x8L1b/2/ which uses version 1.7.x $(function () { $("#clickme").toggle(function () { $(this).parent().animate({right:'0px'}); }, function () { $(this).parent().animate({righ ...

Can you explain the purpose of the bson type in conjunction with the javascript/javascriptwithscope?

I am intrigued by the utilization of the two types of bson, specifically javascript and javascriptwithscope, as the foundational types of bson. What are the use cases for these types and how can a javascriptwithscope object be created and saved in mongodb ...

Combining two ng-model inputs in Angular for seamless data integration

New to Angular and seeking some guidance. I currently have two input fields, one for the area code and the other for the number. // Input field for area code <input area-input type="tel" required="true" name="area" ng-model="employee.home.area">&l ...

Unable to retrieve any response data in Angular 2

I'm having trouble retrieving the response from my API. Despite being able to do so with PostMan, my variable "this.data" remains null. I've experimented with various approaches to no avail. Any assistance would be greatly appreciated. The method ...

Is there a way to modify the CSS or add custom styling within an iframe form?

Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...