Issue with reactivity in deeply nested objects not functioning as expected

Currently, I am utilizing Konvajs for my project. In simple terms, Konvajs provides a canvas for drawing and editing elements such as text nodes that can be manipulated by dragging and dropping. These nodes are organized within groups, which are then added to a containerGroup, and finally placed in a layer. (See example code below)

To enable this functionality, I have integrated Vuex into my setup. I successfully update the data in Vuex, but I encounter an issue when it comes to updating the layers to display the new node on the canvas.

Upon creating a new node, I perform all necessary operations to add it to the group and container. However, after completing these steps, I aim to commit the changes to the layer. Despite my efforts, the component does not reflect the updates when adding a node to 'groupA'.

// Commit layer
store.store.commit('node/setLayer', layer)

// Change state
setLayer(state, payload) {
    Vue.set(state.layers, state.activeLayer, payload)
}

Despite researching extensively, common solutions such as Object.assign() and Vue.set() have not resolved my issue. These methods are intended to inform Vue of a mutated state, yet they do not seem to work in my case. Perhaps I am misunderstanding their usage, hence why I seek clarification and guidance for future reference.

If I trigger a different mutation, the layer list reflects the changes, suggesting a possible limitation with reactivity or how it operates in my scenario.

Here is an overview of my object structure:

state: {
    layers: {
        a: {
            groups: {
                groupA: {
                    nodeText1: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    },
                    nodeText2: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    },
                    ...: {}
                },
                groupB: {
                    node: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    }
                }
            }
        },
        b: {
            groups: {
                groupC: {
                    node: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    }
                }

            }
        }
    }
}

Your assistance on this matter would be greatly appreciated. Thank you in advance.

Answer №1

Instead of replacing the layer itself, I was able to solve my issue by redefining the root.

mutations: {
  setLayer(state, layer) {
    state.layers = {
      ...state.layers,
      layer
    }
  }
}

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

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

After setting nodeIntegration to false, I encountered the following error message: "Uncaught ReferenceError: require is not defined at Object.url (external 'url': 1)". https://i.sstatic.net/galzh.png Upon clicking on the link referring to "exte ...

Ways to retrieve the context of a function caller?

I'm exploring the concept of JavaScript scopes and am curious about a specific scenario: // B has access to 'context' var x = function (context) { y = function () { console.log(context); }; y(); }; x('cool'); ...

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

When working on my Node.js application, I encounter a scenario where a user inputs a date, time, and timezone separately. To ensure the date is saved without any offset adjustments (making it timezone-independent), I am utilizing Moment Timezone library. ...

What is the reason for JavaScript consistently returning the initial value as the result?

My current issue involves customizing Joomla article content using a module. I am attempting to hide a div until a user clicks on an input, such as a radio button labeled Test1. Once Test1 is selected, another hidden field within the div should display the ...

Tips on retaining label names for input boxes

Check out this Plunker example. I am trying to figure out how to keep labels on top of textboxes in this Plunker. Can anyone help me with that? <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-clas ...

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...

Stripping HTML elements from the body of an HTML document using AJAX before transmitting it as data to the controller

My JSP page contains two buttons labeled "download" and "sendemail". When the "Sendmail" button is clicked, an ajax method is triggered to generate a PDF version of the HTML body and send it to the back-end controller. I attempted to utilize the following ...

"The issue with ExpressJS deleteRoute is that it is not properly refreshing user

I have a specific issue with my express controller for deleting user posts. The problem is that while the post is being removed from the page successfully, it is not getting deleted from the User.posts data as expected. function deleteRoute(req, res) { ...

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Attempting to transform the JSON object retrieved from my Icecast server into an array for easy access to current listener statistics to display in HTML. Below is the JavaScript code being used: const endpoint = 'http://stream.8k.nz:8000/status-json ...

Update the name of the table header dynamically based on the checkbox that is selected in Vue

I am working on a project where I have checkboxes that determine the header of my table based on selection. Starting from <th>Default</th>... If checkbox1 is checked, the header will change to "CheckBox1". If checkbox2 is checked, the header ...

Remove class names from CSS and store them in an array

I have a specific HTML file where the CSS is included at the beginning of the document, enclosed within comment tags. My task is to extract the names of the classes located between these comment tags. /* target >> */ .oneClass { ... } .anotherOne { ...

Issue with injecting Angular service in unit test

Hello, I'm currently working on a simple test: define(["angular", "angularMocks", "app", "normalizer"], function(angular, mocks, app) { describe("service: normalizer", function () { var normalizerService; beforeEach(module("ADB")); b ...

The "a" HTML link element is stubbornly resisting being attached to an event listener

I have implemented the MutationObserver observer in my program to monitor the addition of elements. One specific condition I am checking for is if the added element is an anchor tag (tag="a") and if the link is a DOI, then I attach a contextmenu ...

Guide to managing AutoComplete {onChange} in MUI version 5 with a personalized hook

Currently, I am utilizing a custom hook that manages the validation and handling of the onChange function. For most components like input, select, and textField, I have no trouble with handling the onChange event using the syntax below: The code snippet ...

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

Tips for initiating a private call while utilizing SSR Nuxt framework

Currently, I am working on a headless solution for a WordPress website and have come across a specific endpoint where I need to authenticate to retrieve some data that will be publicly accessible. However, I am worried about the potential exposure of sensi ...

What is the best way to retrieve an element from an array within a script?

As a newbie in the realm of vue and Laravel Framework, I am eager to fetch data from an API and display it dynamically on my web page. To achieve this, I have already set up a table named 'Progress' where I seeded some initial data. Utilizing AP ...

Is it possible to pass the index variable of a for loop to a different function?

As a current bootcamp student, I have a question about passing the index of a for loop to another function. Specifically, I am trying to fetch data from an API (which provides me with a random cryptocurrency from an array) 4 times and then pass that data ...