Utilize vue.js to save the components of an object

    data() {
        return: {
          user: {},
          userName: "",
          userAge: ""
    }
  },

methods: {

    saveUserName: function() {
          this.userName = this.newUserName;
          this.$refs.userNameModal.hideModal();
          this.$session.set('userDetails', {userName: this.userName});
        },

    saveUserAge: function() {
          this.userAge = this.newUserAge;
          this.$refs.userAgeModal.hideModal();
          this.$session.set('userDetails', {userAge: this.userAge});
        },

    },

    beforeMount: function() {
    if (this.$session.exists('userDetails')) {

          this.user = this.$session.get('userDetails');
          console.log("userDetails", this.user)
        }

    }

I have a specific form setup for users where each entry requires filling in a modal that pops up. Upon pressing the "done" button, a corresponding function is called to save the entered information and store it in session storage. However, I'm facing an issue where only one value can be stored at a time, causing the previous entry to get reset by the new one. Is there a way to properly populate the 'user' object with both username and user age values simultaneously in the session storage instead of having them overwrite each other? I expect the 'beforeMount' log to display something like: user: {userName: "Mario", userAge:27} when the session storage is not empty. Thanks!

Answer №1

data() {
  return {
    currentUser: {
      name: "",
      age: ""
    },
  };
},

methods: {
  saveName: function() {
    this.currentUser.name = this.newName;
    this.$refs.nameModal.hideModal();
    this.saveUserData();
  },

  saveAge: function() {
    this.currentUser.age = this.newAge;
    this.$refs.ageModal.hideModal();
    this.saveUserData();
  },

  saveUserData: function() {
    this.$session.set('userData', this.currentUser);
  },
},

beforeMount: function() {
  if (this.$session.exists('userData')) {
    this.currentUser = this.$session.get('userData');
    console.log("User Data", this.currentUser)
  }
}

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

breezejs: Non-scalar relationship properties cannot be modified (Many-to-many constraint)

Utilizing AngularJS for data-binding has been smooth sailing so far, except for one hiccup I encountered while using a multi-select control. Instead of simply adding or removing an element from the model, it seems to replace it with a new array. This led t ...

When the user scrolls to the right side of the page, fresh content will be loaded

While there are many plugins available that enable content to be loaded when the user reaches the bottom of the page, I have been unable to find a jQuery plugin that allows content to be loaded when the user reaches the right side of the document. Does an ...

Incorporate an Angular app into an existing application and seamlessly transfer the data

I am currently in the process of integrating an Angular app into an existing jQuery application. Let's say I have a basic button in my HTML code. My goal is to load the Angular app and execute controller code when the button is clicked. To achieve t ...

Adding several entries into mysql with the assistance of php

I've been attempting to input multiple records into my database table, but every time I try, all I see are zeros(0) inserted into the fields. Here's what I attempted: I used a foreach loop for insertion, but unfortunately it doesn't seem to ...

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Utilizing a basic ajax call both on page load and click events, where I have defined separate functions for each. Despite using different URLs and parameters in the function, the JSON data from the previous call is still being displayed when clicked. Bel ...

`Obtaining an array of selected values from a deeply nested JSON object`

Looking to extract specific key values from a nested JSON object based on the boolean value of another key. In this case, I need the "name" key values for items where the "checked" key is true, and return them in a result array. Here is an example of the ...

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Having an issue where I can't remove and redraw the chart in my React Highchart project. I've been unable to find a solution for this problem. Here is the code snippet: import { useState, useEffect, useRef } from "react"; import Highch ...

Is there a way to implement full-page scrolling in Vue?

Looking for a Vue equivalent of the fullpage.js library. Need a component that allows scrolling through elements similar to fullpage.js. ...

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

I am currently working on creating a single page application (SPA) using Mithril.js. While I have come across some helpful tutorials like the one here and on the official Mithril homepage, I am struggling to combine the concepts from both sources effective ...

Encountering the 'currently unable to handle this request' issue while trying to render an inertia component in Laravel 8 with vue.js

Encountering an error message that says "currently unable to handle this request" while trying to render an inertia component from app/Exceptions/Handler.php in Laravel 8. Software Versions: @inertiajs/vue2 version: 1.0.3 @inertiajs/inertia-laravel versi ...

A novel way to enhance a class: a decorator that incorporates the “identify” class method, enabling the retrieval

I have been given the task to implement a class decorator that adds an "identify" class method. This method should return the class name along with the information passed in the decorator. Let me provide you with an example: typescript @identity(' ...

Displaying client-side filtered rows in a jqGrid with postData filter upon initial loading

Our website includes a jqGrid that initially retrieves its rows using the built-in ajax fetch feature, returning a json object. We then apply filtering and searching on the client side by creating custom functions to generate postData filters. However, we ...

Error validation for jQuery div dropdown

Can jQuery validation be used to set the required attribute on a Bootstrap styled div dropdown instead of an option/select tag? The tags cannot be changed on this page, and there are multiple div dropdowns. <div class="btn-group"> <button typ ...

Encountering RangeError with the Number() function on my express.js server

I'm working with an HTML form that looks like this: <form class="" action="/" method="post"> <input type="text" name="num1" placeholder="First Number"> <input type= ...

Guide to resetting a CSS animation with pure JavaScript

My flexbox contains 4 images, each triggering an animation on hover. However, the animation stops if I hover over the same image again. I have tried various JavaScript solutions found online to restart the animation, but none seem to be working for me. S ...

Directive in AngularJS is a reusable component that allows

Let me explain my situation. I am dynamically adding a block of code using JavaScript and binding it to my AngularJS scope. Everything seems to be working fine, except for one issue. There is a directive on a text box that works properly. However, the $wat ...

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

I am looking to utilize Google Map Markers to indicate the locations where our services are offered. The code I have created using latitude and longitude is functioning properly, however, for my project I need to display city names instead of lat/long ...

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

What is the process for creating a modal transition?

I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...