What is the best way to keep vnodes saved in the browser indefinitely?

Is there a way to redirect pages in Vue.js without refreshing the page while also keeping the component alive? I've tried using JSON.stringify(vnode) to store the vnode but I keep getting a TypeError: Converting circular structure to JSON error.

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'VueComponent'

I need to find a way to persist the vnode even after redirecting to another page, as using JavaScript variables won't work since they become null upon redirection. Is there a way to store the vnode indefinitely in the browser?

Your help is much appreciated!

javascriptvue.js

Answer №1

If you want to save the vnode data, you can do so by following this method:

 import { h } from 'vue'
 function generateVnodeByData(data){
    return h(...data)
 }

 const data = ['div', {class: 'localData'}, []]

 const localNode = generateVnodeByData(data)

Another option is to store the data in the browser and then convert it to a node using JavaScript.

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

ForEach fails to refresh the primary array

I am currently working on extending the values of each item in an array. My array consists of objects with x, y, and z fields. I aim to append more items to each object within the array using information obtained from a http.get call's response. The ...

javascriptnode.js

Enhance an existing webpage by integrating ajax with jquery-ui

I'm seeking assistance with integrating an advanced search feature into an existing webpage system. It appears that there is a complication with the current jQuery UI being used on the page: <script src="js/jquery-ui-1.10.4.custom.js"> ...

javascriptjqueryajaxjquery-ui

Converting a Curl command to a JavaScript POST request: best practices

Is it possible to convert the given curl code into a JavaScript post request that will function effectively in all browsers? curl https://connect.stripe.com/oauth/token \ -d client_secret=sk_test_f7PKXx5NRBFG5r41nTrPT7qB \ -d code="{AUTHORIZATIO ...

javascriptajaxcurlstripe-connect

Operating with an array as an array is not possible

Currently, I am in the process of creating an array structured like so: var p1_s1 = { 'title': 'p1_s1', 'titleDisplayed': 'p1_s1', 'type': 'numbers', 'page':1,'strings& ...

javascriptarraysfor-loopforeach

A method to eliminate the mouse-over effect following the selection of an input box

Currently, I am utilizing Angular and encountering three specific requirements. Initially, there is an input box where I aim to display a placeholder upon pageload as 'TEXT1'. This placeholder should then toggle on mouse hover to display 'TE ...

javascripthtmlangularangularjstypescript

Fixing Typescript assignment error: "Error parsing module"

Trying to assign an object to the variable initialState, where the type of selectedActivity is Activity | undefined. After using the Nullish Coalescing operator (??), the type of emptyActivity becomes Activity. However, upon execution of this line, an err ...

javascriptreactjstypescript

Is it possible to send the value of "this" as an argument to a different function in JavaScript?

I currently have the following code: $('#slider li').click(function () { var stepClicked = $(this).index(); alert(stepClicked); if (stepClicked != 0) { $('#cs_previous').removeClass('cs_hideMe'); } els ...

javascriptjqueryparametersthis

Press on a rectangle inside an HTML5 SVG program

I'm currently developing a web application that utilizes the svg and Raphael library: workflowEditor.show(); var myList = document.getElementsByTagName("rect"); for (var a = 0; a < myList.length; a++) { myList[a].addEventListener("OnClick", f ...

javascriptjqueryhtmlsvghtml5-canvas

Accessing data from an array using onClick in a React component

I have an array.map of buttons that cycles through API data. When a button is clicked, I want to take that specific button's data and store it in local storage. I've been searching on Google but can't figure out how to do this. Any ideas? {t ...

javascriptreactjs

Retrieve the host name using the getStaticProps method

Can the hostname be accessed within the getStaticProps function? export async function getStaticProps(context) { // retrieving the hostname const hostname = ???? } ...

javascriptnext.js

When attempting to rotate a sphere in threejs, the rotation may not function properly if a loop is

I am attempting to rotate a sphere a specified number of times when a button is clicked (with the user selecting the number of rotations). To achieve this, I have implemented a for loop: $('#clickme').on('click', function () { var ...

javascriptthree.js

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The g ...

javascriptcssbootstrap-4responsive-designresponsive

Best method to run AJAX-retrieved JavaScript code without relying on jQuery

Imagine receiving a response to an AJAX data load request containing a combination of JavaScript and HTML, like this: <script>window.alert('Hello World!');</script> <p>This is a paragraph. Lorem ipsum dolor sit amet...</p> ...

javascriptajaxeval

Using a for loop within the rowCallback parameter of the datatable function in R that contains JavaScript code

Incorporating conditional formatting into a Shiny app datatable with rowCallback options poses a challenge due to the dynamic nature of table size changes. The aim is to change the background color based on whether values in certain columns meet specific c ...

javascriptrfor-loopdt

Exploring the power of regular expressions in Javascript

In my code, I am using the following regular expression: var re = new RegExp("(^|\\s)" + classname + "(\\s|$)"); I know that \s represents a white-space character and the caret symbol denotes the "beginning with". However, I am c ...

javascriptregex

one webpage featuring HTML-based charts - visual data representation in HTML

I am looking to create HTML charts using a single file that includes JavaScript and jQuery. Specifically, I need the ability to generate line charts, pie charts, and other types of graphs, all within one file. I do not have much knowledge about JavaScript ...

javascriptiphonehtmlobjective-ccharts

React JS: How to prevent Yup and Formik error messages from being displayed multiple times upon submission

I have implemented Yup and Formik in my Sign up form to handle validation. My goal is to display specific errors based on the Yup validation rules I've set up. Take a look at the code snippet below: import React from 'react'; import { ...

javascriptreactjsvalidationformikyup

What is the purpose of specifying http://localhost:3000 when accessing API routes in Next.js?

I created an API route within the pages directory of my NextJS project. It is functioning properly as I am able to retrieve data by directly accessing the URL like http://localhost:3000/api/tv/popular. My goal is to fetch this data using getStaticProps and ...

javascriptreactjsnext.js

The error message "consts is not defined in React Carousel renderArrow" indicates

While working with the react-elastic-carousel package, I encountered an issue when attempting to implement my own custom arrows. This is the code snippet I used, which was borrowed from the documentation: function App() { return ( <div> ...

javascriptreactjscarousel

What is the best way to position an icon to the left of the text?

My code is as follows: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <span> <i class="fa fa-check"></i> This text is just a test and repeating to ...

javascriptjqueryhtmlcss