Changing object in Vuex mutation - a step towards state update

When a button is clicked by the user, I aim to update the data in my vuex store with the information from my local object. However, I am facing an issue with the mutation process. Below you can find some code snippets for better understanding.

The following method is executed upon clicking the button. (this.tableview is a local object containing identical values as the vuex object)

            updateVuexTableview() {
                // eslint-disable-next-line no-console
                console.log("Update Vuex Table view");
                this.updateTableview(this.tableview)
            }

Within this method, the vuex action is invoked. Here is what the action looks like: (updTableview represents the new data that I intend to insert)

async updateTableview({commit}, updTableview) {
        const response = await axios.put(
            `http://localhost:3000/tableview`,
            updTableview
        );

        // eslint-disable-next-line no-console
        console.log(response.data);

        commit('updateTableviewMut', response.data);
    },

This is the problematic mutation function being called. Despite attempting to pop and push the data again, I have yet to find a working solution.

    updateTableviewMut: (state, updTableview) => {
        state.tableview.push(updTableview)
    },

Below is how my state is defined:

const state = {
    tableview: {
        "thema_c": true,
        "status_c": true,
        "priority_c": true,
        "custom1_c": true,
        "custom2_c": true,
        "customFieldName1": "Custom1",
        "customFieldName2": "Custom2"
    },
};

Answer №1

To update an object, you cannot use .push - instead, you need to reassign the object or set a specific field. Modify your code like so: If you wish to add a key-value pair, you can use:

updateTableviewMut: (state, updTableview) => {
  state.tableview['keyname'] = updTableview
}

Alternatively, if you want to reassign the entire object, you can do:

updateTableviewMut: (state, updTableview) => {
  state.tableview = updTableview
}

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

Error: A surprise occurrence of "<" detected in Vite Vue JavaScript files

While utilizing Vue-CLI, the following code executed smoothly with no complications: export const resourceCenterIcon = <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-gift" viewBox="0 0 16 16"> ...

Sending a PDF document to a function that specifically calls for a file location or URL

Currently, I am developing a web application for an online library where I need to extract metadata from PDF files that are uploaded. To achieve this, I am utilizing the nodejs libraries pdf.js-extract and multer-gridfs-storage for file uploads. However, I ...

Guide to creating a universal focus event for all textboxes across an Angular 2 / 4 / 5 application

I am in the process of developing a directive that allows textboxes in the application to scroll into view. However, adding this directive to thousands of textboxes is proving to be quite tedious. Is there a way to use an interceptor to capture all focus ...

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

An uncomplicated example of a Node WebSocket Client and Server

Currently, I am in search of a straightforward websocket example server that is capable of upgrading and reading data from a socket. While I am currently studying RFC 6455, I am also curious to see if there exists a basic example or source project for refe ...

Guide on deploying Nuxt JS to Netlify in production mode

I've built my app using Nuxt.js and now I'm looking to deploy it on Netlify. First step is to configure my deployment settings: Repository on git Base directory: Not specified Build command: npm run build && npm run start Publish dir ...

Is there a way to extract data within xml tags with attributes using JavaScript/ Ionic without relying on DOM or ActiveXObject?

I am trying to extract specific information located between two tags, specifically <wsse:BinarySecurityToken> Here is an example: <wsse:BinarySecurityToken att1="abc" att2="cd3" att3="adfa">This is the text I am trying to extract!!!</wsse ...

Fade in and insert before at the same time

I'm facing an issue while trying to animate the final line of code provided. Could it be due to the combination of jquery and regular javascript? function addtext(name) { var text = document.getElementsByName(name)[0].value; var length = text ...

Increase the date by one day excluding weekends (Saturday and Sunday)

My current code is designed to add +1 day to the current date. var date = '30 Apr 2010'; var actual_date = new Date(date); var final_date = new Date(actual_date.getFullYear(), actual_date.getMonth(), actual_date.getDate()+1); Now, I am looking ...

Mongoose: Insert a new item into an array of objects within an object property

I need help adding an element to an existing array within an object field in my mongoose "Utilisateur" schema. This is what my schema looks like: https://i.sstatic.net/xv69M.png The goal is to insert a new element into the "lien_vers" array using the foll ...

How do I utilize JSON to transmit a string to my server with Tornado?

Currently, I am facing an issue with my HTML input box and a JavaScript function that is triggered upon clicking a submit button. My goal is to send the data entered by the user in the input box to my Tornado server. Despite trying various options, I have ...

Tips for incorporating a return statement within a network request function that is already returning information pertaining to the request

Is there a way to retrieve the data extracted from within newReq.on('response', (response) => {? var request = require('request'); const cheerio = require('cheerio'); const { app, net, BrowserWindow } = require('elect ...

Utilizing Asynchronous Functions within a Loop

I have a situation where I am working with an array and need to make API calls for each index of the array. Once the API call is resolved, I need to append the result in that specific element. My goal is to ultimately return the updated array once this pro ...

Changing in height by utilizing javascript's style.height animation

When attempting to adjust the height property using JavaScript instead of jQuery, a challenge arises. The issue lies in the inability to reset the height back to zero after setting it to the scrollHeight of the element. The following is the JavaScript cod ...

Steps for inputting time as 00:00:00 in MUI's X DateTimePicker

React:18.2.0 mui/material: 5.10.5 date-fns: 2.29.3 date-io/date-fns: 2.16.0 formik: 2.2.9 I'm facing an issue with using DateTimePicker in my project. I am trying to enter time in the format Hour:Minute:Second, but currently, I can only input 00:00 f ...

group items into ranges based on property of objects

I've been grappling with this issue for far too long. Can anyone provide guidance on how to tackle the following scenario using JavaScript? The dataset consists of objects representing a date and a specific length. I need to transform this list into a ...

Express landing page continuously serves static files

I'm facing an issue with using static files in my project. When a user makes a get request to the "/" landing page, I intend to send non-static data like a JSON response. However, instead of sending "123", it automatically serves my index.html file fr ...

AngularJS - Sending configuration values to a directive

I'm trying to figure out how to pass parameters (values and functions) to an Angular directive. It seems like there should be a way to do this in Angular, but I haven't been able to locate the necessary information. Perhaps I'm not using th ...

Error: The texture is not rendering on the object in Forge Three.js

I am struggling to showcase a textured plane using Three.js within the context of Forge RCDB. Initially, I was able to render the plane; however, it appeared completely black instead of being textured... After making some adjustments, now nothing is showin ...

Path to local image in JavaScript

Apologies for the newbie question, but I'm trying to display a gif on a webpage using an HTTP link and it works perfectly. However, when I try to replace it with a file path, it doesn't work. The gif is located in the same folder as the webpage. ...