Ways to retain modifications after components are re-rendered in Vue.js

I am facing a dilemma with 4 components that are loaded based on the values of two boolean variables onePage and currentStep. Depending on these values, the components should either load one by one or all together.

   <div v-if="!onePage">
    <Component_1 v-show="currentStep === 1"  @eventHandler1="someFunc()" :prop="someData1" />
    <Component_2 v-show="currentStep === 2"  @eventHandler2="someFunc()" :prop="someData2" />
    <Component_3 v-show="currentStep === 3"  @eventHandler3="someFunc()" :prop="someData3"/>
    <Component_4 v-show="currentStep === 4"  @eventHandler4="someFunc()" :prop="someData4" />
  </div>

  <div v-else class="mt-5 pt-1">
    <Component_1  @eventHandler1="someFunc()" :prop="someData1" />
    <Component_2  @eventHandler2="someFunc()" :prop="someData2" />
    <Component_3  @eventHandler3="someFunc()" :prop="someData3"/>
    <Component_4  @eventHandler4="someFunc()" :prop="someData4" />
  </div>

The challenge lies in maintaining changes within each component when the value of onePage is toggled. For example, changes made in Component1 do not persist when onePage: false, currentStep: 1 (e.g. changes to a data object) causing it to reset to default values when rendered through the v-else condition in the second Div.

javascriptvue.jsvuejs2vue-component

Answer №1

When dealing with component_x in multiple blocks within your code, it's important to note that they represent different components with distinct internal states. This means that toggling onePage will only show/hide different components without maintaining internal changes.

UPDATE: An alternative solution involves using a single instance for each component 1->4. In this approach, there is no need to transfer internal states to props either.

<div class="mt-5 pt-1"> <!-- you can incorporate class binding if necessary -->
  <Component_1 v-show="onePage || currentStep === 1" @eventHandler1="someFunc()" :prop="someData1" />
  <Component_2 v-show="onePage || currentStep === 2" @eventHandler2="someFunc()" :prop="someData2" />
  <Component_3 v-show="onePage || currentStep === 3" @eventHandler3="someFunc()" :prop="someData3"/>
  <Component_4 v-show="onePage || currentStep === 4" @eventHandler4="someFunc()" :prop="someData4" />
</div>

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

Tips for preventing CSS conflicts when incorporating an Angular 6 application into another application

We recently developed an Angular 6 web application and now we want to seamlessly integrate it into one of our client's online store. However, we are facing some CSS conflict issues: For instance: - The webshop is built on Bootstrap 3 while our app u ...

javascriptcssangularbootstrap-4

Altering URL while transmitting file via Express

When attempting to send an HTML file as a response, I am experiencing an issue where the current URL is being maintained. Despite my attempts to use the location method, it does not seem to work. Ideally, I would like the functionality to redirect to a new ...

javascriptexpress

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

After researching about the @Input() and @Output() decorators, I discovered that we have the option to use an alias instead of the property name for these decorators. For example: class ProductImage { //Aliased @Input('myProduct') pro ...

javascriptangulartypescript

Are there any potential performance implications to passing an anonymous function as a prop?

Is it true that both anonymous functions and normal functions are recreated on every render? Since components are functions, is it necessary to recreate all functions every time they are called? And does using a normal function offer any performance improv ...

javascriptreactjstypescript

ActiveX cannot be executed from the server

My MFC activeX control works fine when run from disk, but I encounter errors when hosting it on a server. Client: Windows 7 machine Server: Ubuntu running Apache Below is the HTML code along with the encountered errors. Any advice would be much ap ...

javascriptactivex

Determine the exposed area of an element with overflowing content

I am looking for a way to determine which text within an element (such as a div or textbox) is currently visible when there is overflow. As the user scrolls, I need to have an updated list of the visible text. I am open to using any elements, but only a ...

javascriptjquery

Load Vue components dynamically while also highlighting code previews and preserving the HTML structure

My goal is to dynamically load Vue components and have the component's HTML displayed as a code preview when it becomes visible. Currently, the code preview shows a single big string because I am using $el.innerHTML. What I want is for the structure ...

javascripthtmlvue.jsvue-componentcodemirror

Despite changes in the state they are set to, the InitialValues remain constant

I am facing an issue with a Semantic-UI modal that includes a redux-form as its content. The form is passed to the modal when it opens, and the form element has an initialValues prop mapped to state. <FormModal handl ...

javascriptreactjsreduxsemantic-uiredux-form

Experiment with the Users.Get function available in vk-io

I am having an issue with a create command: Ban [@durov] and I encountered an error. Here is how I attempted to solve the problem: let uid = `${message.$match[1]}` let rrr = uid.includes('@') if(rrr == true){ let realid = uid.replace(/[@]/g, &ap ...

javascriptnode.jsbotsvk

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Is it possible to utilize the FLOT Javascript library for creating a chart with dual axis and three data sets? I am specifically looking to have one data set on the left axis and two on the right axis. Ideally, I want to stack the two datasets on the right ...

javascripthtmlchartsflot

React - Error occurred when parsing module: Unexpected Token. It is recommended to use a suitable loader to manage this file format

As a beginner in using React, I might be making obvious mistakes and I apologize for that. After researching similar bugs on various platforms like StackOverflow and GitHub, I couldn't find a solution that works for my specific issue. Here is the erro ...

javascriptreactjsbabeljsbabel-loader

Is there an issue with MVC5 in passing JSON data to Controller using Ajax?

I am working on implementing duplication checking in my MVC5/EF Code-First application. In the Asset View's Create() method, I use JavaScript to show/hide textboxes for adding a new location_dept/location_room: <div class="form-group"> ...

javascriptjqueryajaxjsonasp.net-mvc

`vue.js pagination for loading nested arrays`

I am currently working on implementing the vue-paginate component from this source: https://www.npmjs.com/package/vue-paginate . My goal is to set up pagination for questions retrieved from firebase. Here is the initial setup: new Vue({ el: '#app& ...

javascriptarrayspaginationvue.jsvuejs2

What is the best way to display the weather information for specific coordinates in ReactJS?

I've been working on a code that retrieves farm details based on longitude and latitude. My goal now is to fetch the weather information for that specific farm using openweathermap However, each time I attempt to do so, an error message {cod: '4 ...

javascriptreactjsopenweathermap

What could be the reason why the @media print selector is not showing the correct format when I try to print?

When I click the print button, the text is supposed to display in four columns in the print dialog, but it appears as paragraphs instead. This is my script code where there is a click event for the print button. When I click on it, the print dialog pop ...

javascriptjqueryhtmlcss

Retrieving data from a cell within an HTML table by utilizing the children[] method

I've been trying to extract a specific value from the HTML of a cell in an HTML table. I attempted to use the .rows parameter initially, but that resulted in the JavaScript halting at the line involving .row. Currently, I have resorted to assigning an ...

javascripthtml

A step-by-step guide on connecting an event listener to the search input of Mapbox GL Geocoder in a Vue application

I've encountered a challenge trying to add an event listener to the Mapbox GL Geocoder search input within a Vue application. It appears to be a straightforward task, but I'm facing difficulties. My objective is to implement a functionality simi ...

javascriptvue.jsmapbox

slickGoTo function does not update the current slide

I recently integrated a slider using the react-slick library in my React application. I added a ref to the <Slider> component and attempted to use it to change the active slide: import React, { useRef } from 'react'; import Slider from &apo ...

javascriptreactjsreact-hooksreact-slick

Is there a way to set the chosen option on a dynamically loaded secondary select using VueJS?

I am working with a city select dropdown: <select v-model="city"> <option value="" selected>SELECT YOUR CITY</option> <option value="city1">City 1</option> <option value="city2">City 2</option> < ...

ajaxlaravel-bladevue.jsvue-resource

Combining array objects in JavaScript based on a matching condition

Is there a way to combine objects in an array if a specific condition is met? Specifically, I need to merge the start time and end time from objects in the array. Here is an example array: [ {id: 909, room: "room1", name: "end" ...

javascriptarraysobject