When using nativescript-vue to navigate to a Vue page, the props are cached for later

A couple of days back, I managed to resolve the issue I was facing with navigating through Vue pages. However, after fixing that problem, I made an error by mistakenly attempting to pass an incorrect key value to the Vue page I was redirecting to.

When the navigateTo method is executed on a particular Vue page, the following error occurs:

JS: 'There was an error!' [ReferenceError: test is not defined]

Below is the method used for redirection along with props:

import Vue from "nativescript-vue";
import router from "./router";

Vue.prototype.$changePage = function(to, props, params) {

  this.$navigateTo(router[to], {
      props,
      ...params // clearHistory, backstackVisible
  });

}

The way I invoked the function was:

    goToHome(prop) {
        this.$changePage(aspecificpage, { test:'hello' }, { clearHistory: true });
    }

Now, whenever I try to access that specific page with incorrect props content, it results in an error. Other pages are being called without any issues. Is there any suggestion on how to solve this problem?

Thank you all in advance for your help.

Answer №1

script.js

import React from 'react'
import Home from './components/HomePage'
import Profile from './components/ProfilePage'
import Settings from "./components/SettingsPage"

const pageRoutes = {
    Home: Home,
    Profile: Profile,
    Settings: Settings
};

React.prototype.$pageRoutes = pageRoutes;

React.prototype.$navigateToPage= function (to, props = null) {
    this.$goToPage(this.$pageRoutes[to], props)
};

someReactComponent.jsx


handleButtonClick() {
    this.$navigateToPage('Profile', {
        props: {
            message: "Welcome!"
        }
    });
}

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

What is the process for adding an additional level to an Object for an item that is not predefined?

The primary concern at hand is as follows: Retrieve JSON data from the server Populate a form with the data Serialize the form Create a JSON object with the correct structure Send the JSON object back to the server I am facing challenges specifically on ...

Exploring ways to utilize removeEventListener in React Native

Can someone assist me with converting this code to React? I am new to using React and struggling with the implementation. Thank you in advance! <progress id="bar" value="0" max="110"></progress> <button onClick={i ...

<JavaScript> changing the color of hyperlink in d3.js - <Organizational Chart>

screenshot The width of the link can be adjusted, but the color remains unchanged. I have attempted various solutions series.links.template.setAll({ strokeWidth: 2, strokeOpacity: 0.5, color: am5.color('#ffffff'), links: ...

Issue: The object is unable to be executed as a function, resulting in the failure to return an array

Currently, I am extracting table values from the UI row by row. This involves clicking on each row and retrieving the corresponding data. exports.getTableData = function(callback){     var uiArray =[];     var count;         aLib.loadCheck(c ...

Determine the index of a specific character within a string using a "for of" loop

How can I obtain the position of a character in a string when it has been separated programmatically using a for...of loop? For instance, if I wish to display the position of each character in a string with the following loop: for (let c of myString) { ...

What is the proper way to include an attribute to every individual object within an array?

Here is the structure of my array: "taxDetails": [ { "taxType": "Flat Service Charge", "taxAmount": 0 }, { "taxTypeId": "1", "taxType": "Service Tax", "validFrm": "2016-01-18", "validTo": "2020-02-27", "taxPrctgSbt": 200, "taxPrctg": 14.5, ...

What is preventing me from binding the array index to a model in AngularJS with two-way binding?

I'm currently facing a challenge with a seemingly simple task: I have an array of string values that I want to link to a select element's options, and then connect the index of the chosen value to a variable. However, I have found that neither us ...

Tips for restricting users from inputting spaces into a form field using ReactJS

Within my application, I have developed a specialized component named QueryForm that serves the purpose of enabling search capabilities. The code snippet being outputted by this component is as follows: ...

Issue observed: React Map layer is not loading until mouseEnter event happens

The map is displayed with the color fill only when a mouse enter event occurs. How can I make it trigger on load instead? I am working with react-simple-maps, and the JSON data is successfully loading the map on mouse enter. You can find the source code ...

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

How can I optimize Javascript and CSS that are being used on my website but are not physically hosted on my website?

On my website, I have a plugin called "Contact Us" that was created and is being operated by Dropifi. Lately, I've been working on optimizing my site for SEO/Speed using Google's PageSpeed Insights tool. I enabled compression with GZip for all el ...

Effective strategies for managing form submissions with React and Typescript

As I dive into refactoring my code to TypeScript, especially as I am still getting accustomed to it, I find myself pondering about the HTML element types with React events. This has led me to rethink how I approach form creation and submission event handli ...

Having trouble importing a variable from a precompiled library in TypeScript JavaScript

Here is the content of my package.json file: { "name": "deep-playground-prototype", "version": "2016.3.10", "description": "", "private": true, "scripts": { "clean": "rimraf dist", "start": "npm run serve-watch", "prep": "browserify ...

JS: Modifying this function to manage a click on a hyperlink

After following the guide provided here I have successfully implemented a drop down list that sends the value to an external PHP script, retrieves HTML output, and displays it in a "div" on the same page. It works flawlessly. My next objective is to send ...

The navbar tag is not functioning properly within Reactjs

Need help with creating a web header in ReactJS? I'm still learning Javascript and struggling to position the menu on the right side using bulma CSS. Can anyone offer some guidance? import React, { Component } from 'react'; import './H ...

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

Issue encountered while retrieving JWT

Currently, I am tackling the challenge of implementing JWT authentication using Angular and Java Jersey. I have successfully managed to send the JWT token from the server to the client, which can be observed as a POST response with a status code of 200 in ...

What steps can be taken to enable JSONIX to handle additional XML elements during the deserialization process?

JSONIX 2.0.12 is truly impressive. I am working with a substantial XML file and I am only looking to convert certain elements into JSON format. Whenever I omit some elements from my mapping file, JSONIX throws an unexpected element error during deseriali ...

Restricting the Vue for-loop results to display only the current item in use

Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post. <div v-for="p in posts" style="padding: 16px"> <div> &l ...

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...