I am attempting to save the input value to an array in local storage using VUEX. However, my current method is not producing the desired results

I am facing an issue where I am trying to push an input value and store it in an array in the local storage using VUEX. I have created an array in the state for this purpose. Initially, I push the value and then I stringify it to set the value to the store in local storage. However, when I try to retrieve it from my array by parsing the JSON, it is not functioning as expected. I am unsure where my value is being directed to. Additionally, the console displays an error stating 'push is not a function'.

    state:{
    formItems:JSON.parse(localStorage.getItem('formItems'))||[]
},
mutations:{
    formFunction(state, myInput){
        state.formItems.push({myInput});
        localStorage.setItem('formItems', JSON.stringify(state.formItems))
    },


<template>
<div>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <input type="text" v-model="Input">
                <br>
                <button class="btn waves-effect" @click="saveInput">Save</button>
            </div>
        </div>
        <p>{{text}}</p>
    </div>
</div>
</template>
<script>

export default {
    name:"test",
    data:function(){
        return{
            Input:"",
        }
    },
    methods:{
        saveInput(){
            this.$store.commit('formFunction', this.Input);
            this.Input="";
        }
    },
computed:{
    text(){
        return this.$store.state.formItems;
    },
</script>

Answer №1

Issue resolved! I have discovered that clearing all local storage in the browser solved the problem completely. Once cleared, everything is functioning perfectly without any issues.

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 properly formatting quotes in JSON to activate a link

I am working with a JSON configuration file that looks like this: "type": "script", "label": "coreapps.archivesRoom.printSelected", "script": "emr.fragmentActionLink(${project.parent.artifactId},\"downloadPatientHistory\", &bs ...

Troubleshooting issues with Vue.js page routing

Currently, I am diving into the world of vue.js and encountering difficulties with setting up routing. My goal is to utilize templates stored in separate HTML files, rather than inline templates. The issue I'm facing is that the routing does not seem ...

Retrieving the user's Windows username with JavaScript

Is it possible to retrieve the Windows user name solely in Internet Explorer using the code below? function GetUserName() { var wshell = new ActiveXObject("WScript.Shell"); alert(wshell.ExpandEnvironmentStrings("%USERNAME%")); } What methods ...

Encountering an error while attempting to run bcrypt on Meteor and Nodejs - "Undefined property '_handle'."

Having trouble integrating the bcryptjs package into my Meteor app. Successfully installed bcrypt using meteor npm install --save bcrypt. Trying to implement bcrypt functions with import bcrypt from 'bcrypt';. Encountering an error in the cons ...

Creating a unique 3D model through specified coordinates with the use of THREE.js

I possess an array consisting of (x,y,z) vertices coordinates as well as a facets array that stores the indexes of vertices (taken from the first array) for each facet. Each facet may have a varying number of vertices. Is there a way to construct a unique ...

Incorporate a delay when using jQuery's mouseenter function

I'm trying to implement a tooltip that appears 5 seconds after the mouse enters. Here's the code I've been working with: $('thead').mouseenter( function() { var tooltip = $('<div id="tooltip" class="tooltip-container ...

Accessing Facebook through the React create app login

I recently developed a React Webapp using the create-react-app module. My current challenge involves integrating Facebook login, but I'm encountering some obstacles. I am unsure about where to incorporate the Facebook JavaScript SDK asynchronously to ...

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

How to resolve undefined callback when passing it to a custom hook in React Native

I'm facing an issue with passing a callback to my custom hook: export default function useScreenshotDetection(onScreenshot) { useEffect(() => { ... onScreenshot(); ... }, []); } Strangely, the callback is not being detected ...

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

In my React JS code snippet, I am attempting to search for a value within an object called 'categories' and then add the corresponding key-value pair into a new map named sortedCategories. var categoriesToSort = []; //categoriesToSort contains ...

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

Setting up 'ngProgress' as a loader in my project using the 'ngbp boilerplate' is straightforward and easily customizable

Currently, I am utilizing the 'ngbp' angular boilerplate from GitHub to develop my project. My goal is to implement ngProgress for displaying a loader when navigating between sections. I have successfully installed ngProgress via bower and ensur ...

Tips for receiving alerts on external updates to a mongo collection using sails

Currently, I am in the process of creating an application utilizing mongo and sails. As part of my development, I am investigating how the real-time update feature in sails functions. Although I am currently using sails 0.9.16, I am also curious about ans ...

The handlebar does not undergo any modifications once the authentication process is completed

This file is named header.hbs <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>{{ title }}</title> ...

Vue 3 does not refresh getter values

Currently, I am in the process of upgrading from vue2 to vue3 and have run into a specific issue. I have implemented a service named TService // T.ts class T { public obj = { value: false }; constructor() { setInterval(() => { this.obj.val ...

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

Tips for managing this JavaScript JSON array

Here is an example of a JSON array: var data = { name: 'Mike', level: 1, children: [ { name: 'Susan', level: 2, }, { name: 'Jake', level: 2 }, { name: 'Roy', level: 2 }, ...

Encountering an error message that says "ERROR TypeError: Cannot read property 'createComponent' of undefined" while trying to implement dynamic components in Angular 2

I am currently facing an issue with dynamically adding components in Angular 4. I have looked at other similar questions for a solution but haven't been able to find one yet. The specific error message I am getting is: ERROR TypeError: Cannot read ...