Storing an array element in the cache with Vue.js when submitted through a form

Question

Storing an array element in the cache with Vue.js when submitted through a form

I'm facing an issue with saving my input to the cache memory. I attempted to utilize the mounted method, but it's not performing as desired because it fails to retain the last input in memory; upon refreshing the page, the last input gets erased. It's possible that I'm making a mistake since I've only just started learning Vue a day ago. Can someone please clarify what's incorrect here or provide guidance on how to rectify it?

export default {
  name: 'Skills',
  data() {
    return {
      skill: '',
      skills: [
        { 'skill': 'Vue.js' },
        { 'skill': 'Frontend Developer' }
      ]
    }
  },
  mounted() {
    if (localStorage.skill) {
      this.skill = localStorage.skill;
    }
  },
  methods: {
    addSkill() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.skills.push({skill: this.skill})
          this.skill = '';
        } else {
          console.log('Not valid')
        }
      })
    }
  }
}

I am utilizing code from an example where my v-model in the input is "skill." How can I create a method that correctly saves the last input in the cache? I wish to be able to add a new skill to the array and still see the value persist in the array even after refreshing the page. Is this achievable, and if so, how can it be done? I am completely new to Vue and would appreciate any assistance.

javascript vue.js local-storage

Answer 1

Answer №1

Your issue pertains to localStorage rather than Vue.js. Here's the solution:

export default {
  name: 'Skills',
  data() {
    return {
      skill: '',
      skills: [
        { 'skill': 'Vue.js' },
        { 'skill': 'Frontend Developer' }
      ]
   }
},


  mounted() {
    const skillsList = JSON.parse(localStorage.getItem('skillsList')) || []
    if (skillsList.length > 0) {
      this.skills = skillsList;
      this.skill = skillsList[skillsList.length - 1];
    }
  },
  methods: {
    addSkill() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.skills.push({skill: this.skill})
          localStorage.setItem('skillsList', JSON.stringify(this.skills))
          this.skill = '';
        } else {
          console.log('Not valid')
        }
      })
    }
  }
}

Answer 2

Your issue pertains to localStorage rather than Vue.js. Here's the solution:

export default {
  name: 'Skills',
  data() {
    return {
      skill: '',
      skills: [
        { 'skill': 'Vue.js' },
        { 'skill': 'Frontend Developer' }
      ]
   }
},


  mounted() {
    const skillsList = JSON.parse(localStorage.getItem('skillsList')) || []
    if (skillsList.length > 0) {
      this.skills = skillsList;
      this.skill = skillsList[skillsList.length - 1];
    }
  },
  methods: {
    addSkill() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.skills.push({skill: this.skill})
          localStorage.setItem('skillsList', JSON.stringify(this.skills))
          this.skill = '';
        } else {
          console.log('Not valid')
        }
      })
    }
  }
}

Storing an array element in the cache with Vue.js when submitted through a form

Answer №1

Similar questions

The issue of javascript Map not updating its state is causing a problem

Automatically logging in to a website using an AngularJS form

Following the implementation of the YITH ajax navigation filter, my jQuery scripts are no longer functioning as

Having difficulty integrating framer-motion with react-router

Troubleshooting Guide: Resolving Gatsby Develop Issue "Module 'gatsby-cli/lib/reporter' Not Found"

A TypeScript method for accessing deeply nested properties within an object

How can I use jQuery to separate special characters from letters in a string?

Exploring the distinctions among library, package, and module in JavaScript

Tips for preventing labels from overlapping in JavaScript

Is the output of MongoDB's ISODate() function always distinct from that of the Date()

The outcome of comparing with Bcrypt is consistently a negative result

The onChange event does not function properly on formatted Mui sliders

The combination of checkboxes and buttons

I could see the Javascript and CSS code manifesting directly onto my HTML page

Developing a Spring MVC application that sends a JSON response to an AJAX

Tips for customizing table cell styling in editable cells with React material table

React - manipulating data with state, yay or nay?

At which location do you configure the applicationIconBadgeNumber?

How can you delay the return of a function until after another asynchronous call has finished executing?

Is there a way for mocha to conduct a recursive search within my `src` directory in order to find a specific