"Upon reloading my page, I discovered that my data in Vue.js was lost

I'm encountering an issue with page reloads.
Whenever I save on Vscode, it displays correctly on my HTML page. However, upon refreshing the page, the data becomes undefined. The data in the store is functioning properly, but it seems to be only affecting the view profile after reloading the page. If you have any suggestions or solutions, please share as I am at a loss for what to do next.

views/Profile:

<div class="input-group mb-3">
            <span class="input-group-text" id="form-lastName">Last Name :</span>
            <input
              type="text"
              class="form-control"
              aria-label="Username"
              v-model="lastName"
              ref="string"
            />
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text" id="form-firstName">First Name :</span>
            <input
              type="text"
              class="form-control"
              aria-label="Username"
              v-model="firstName"
              ref="string"
            />
          </div>


----------


export default {
  name: "ProfileC",
  data: function () {
    return {
      lastName: "",
      firstName: "",
      selectedFile: "",
    };
  },
  components: {
    NavbarC,
  },
  mounted: function () {
    this.lastName = this.$store.state.userInfos.user_lastName;
    this.firstName = this.$store.state.userInfos.user_firstName;


----------
store/index.js

const store = createStore({
  state: {
    status: '',
    user: user,
    userInfos: {
      lastName: '',
      firstName: '',
      email: '',
      image: '',
    },
    dataArticles: [],
    dataComments: [],
    articleInfos: {
      message: '',
      image: '',
    },
    comments: [],
  },

  mutations: {
    
    updateUserInfos: function (state, userInfos) {
      state.userInfos = userInfos;
    },
},

Answer №1

It appears you're utilizing Vuex. Have you taken the step of installing Vuex persisted-state to ensure data is saved upon page reload?

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 are the steps to implement THREE.MeshLine in my JavaScript project?

While exploring ways to create a line using three.js with a modified width, I stumbled upon this article suggesting the usage of a THREE.MeshLine class available here. However, when I attempted to follow the documentation to implement it in my script, I en ...

Saving information from JSON data obtained through the Google People API

My server is connected to the Google People API to receive contact information, and the data object I receive has a specific structure: { connections: [ { resourceName: 'people/c3904925882068251400', etag: '%EgYBAgkLNy4aDQECAwQFBgcICQoLD ...

What could be causing the jQuery slidedown to malfunction within my table?

My slider is not working when I include a table on my website. The slider works fine without a table, but I need to display members in a table format. Can anyone help me identify the issue with my code? The information needs to be displayed below the nam ...

Unknown Vuex action type "loadUsers" was found while using quasar framework

Trying to set up a store for an API call, I've experimented with various examples but keep encountering this error: [vuex] unknown action type: loadUsers This is my current store configuration: import Vue from "vue"; import Vuex from " ...

Issue with printing error messages for JavaScript form validation

I have implemented the following code for a form to handle validation and display errors below the fields when they occur: <!DOCTYPE html> <html> <head> <style type="text/css"> .errorcss { background-color: yellow; color:re ...

Spacing the keyboard and input field in React Native

Is there a way to add margin between the input and keyboard so that the bottom border is visible? Also, how can I change the color of the blinking cursor in the input field? This is incorrect https://i.sstatic.net/Jsbqi.jpg The keyboard is hidden https: ...

When making an Ajax call, the response returns the existing HTML page instead of the intended

Recently, I attempted to implement an AJAX call using jQuery in the following manner (the file name is BR_states.txt and it matches correctly): <script> function changeSelectedShippingCountry(select){ var countryCode = select.options[select.select ...

Guide to implementing a pop-up modal in React Native that displays item details when a list item is selected

Is there a way to create a modal popup for each list item in order to display selected sizes? I have tried using react-native-popup-dialog but haven't had much success. Can someone assist me with this? Here is the code snippet I am working with: step1 ...

Increasing numerical values within an array using JavaScript

My goal is to enhance the functionality of this visualization by being able to increase or decrease the nodes in the hidden layers. I have attempted to achieve this by adding the following code: I am facing difficulties in adjusting the number of hidden l ...

Accessing User Input Data with JQuery

Can someone help me figure out how to store the input value from a Materialize select form in HTML using a variable in javascript/jquery? Here is the HTML code for the form: <div class="input-field col s12"> <select> <option va ...

Issue with displaying and concealing elements in Firefox using jQuery 3.1.0

I have been working on a small radio player project using jQuery. The code can be accessed on codepen. However, I encountered an issue with the code specifically when running it on Firefox (it works fine on other browsers). The problematic part of the Java ...

Position text fields precisely above the canvas elements

My issue involves positioning two side-by-side canvases within a browser window that the user can resize. I want these canvases to remain centered and not wrap when the window is shrunk, but there's a twist - I also need to collect user information th ...

The v-checkbox appears much larger in size and has a different row size when compared to the v-radio

Currently, I am working on an application using Vuejs 3 with Vuetifyjs 3, and I have encountered an issue regarding the row size difference between a v-checkbox and v-radio when set to density="compact". The discrepancy in line height can be seen in the im ...

Displaying all hidden sections on a website

I'm trying to figure out if there's a way to expand all the collapsible sections on a webpage at once. One section that is relevant to my search looks like this: <tr> <td></td> <td style="..;"> <div s ...

Error message displayed when attempting to render a D3.js geoPath map: <path> attribute d is expecting a number

Currently struggling with creating a map using D3.js The given code functions properly with certain JSON files, but when I try to use the necessary data, it's throwing a series of errors like this: Error: attribute d: Expected number, "….21 ...

Hidden warning to React-select for being uncontrolled

I've integrated react-select into my code: import React, {Component} from 'react'; import Select, {createFilter} from 'react-select'; let _ = require('underscore') class Test extends Component { constructor(props) ...

Guidelines for providing the image file path in an external JavaScript file for creating a Flask API

I am looking to modify the attribute value in the index.html file from an external JavaScript file that is linked to the HTML file. The structure of my folders is as follows: folder structure When I try to specify the path from the HTML file using: {{url ...

How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

My website utilizes Bootstrap along with a carousel slider, which is functioning properly. However, I am encountering an issue when the slider transitions from right to left. It briefly displays a white space between slides, which I wish to eliminate. I wa ...

Pinia store successfully implemented following the state invocation

Currently, I am in the process of developing a vuejs 3 application using the composition API. Within this application, I have implemented 2 separate stores: the userStore which manages user authentication information such as userid and jwt after login, an ...

Issues with basic emit and listener in socket.io

I recently inherited an App that already has socket IO functioning for various events. The App is a game where pieces are moved on a board and moves are recorded using notation. My task is to work on the notation feature. However, I am facing issues while ...