Vue ts does not provide reactivity to arrays with nested elements whose properties rely on the data property

My code includes an array with nested elements that depend on data properties. I'm trying to make it reactive, but for some reason it's not updating when the data properties change. I've tried setting and getting Vue observer sets for these properties, such as this.errorData.isNotServerError = true. However, the properties in the array remain unchanged. I'm using Typescript with Vue.

''' 

private baseErrorLabelList = [
    {
      condition: this.errorData.isNotServerError,
      text: this.$root.$t('login.error_label.not_server_error'),
    },
  ];
'''

This is the array mentioned above.

''' 

private emptyErrorData = {
      isIncorrectDataProvided: false,
      isServerError: false,
      isNotServerError: false,
    };
    private userData = Object.assign({}, this.emptyUserData);
    public errorData = Object.assign({}, this.emptyErrorData);
''' These are the data properties used.

Even without using Object.assign, the issue persists.

typescriptclassvue.jsvue-reactivity

Answer №1

It makes sense to transform the baseErrorLabelList property into a computed property.

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

How can you trigger a page method from a layout event in Vue.js?

I'm working on a design that includes a sidebar and an image gallery on the page. Initially, all images are loaded without any filters applied. However, when a button in the sidebar is clicked, I want the page to display filtered images. Although I ca ...

vue.jsevent-handlingvue-component

Navigating the thorny dilemma of catch-22 situations when dealing with parser

I'm struggling to incorporate @typescript-eslint/no-floating-promises into my ESLint guidelines. This necessitates the use of parserOptions. Below is my .eslintrc.js configuration: module.exports = { root: true, parser: '@typescript-eslint ...

typescripteslinttypescript-eslint

The or operator in Typescript does not function properly when used as a generic argument

My current configuration is as follows: const foo = async <T>(a): Promise<T> => { return await a // call server here } type A = { bar: 'bar' } | { baz: 'baz' } foo<A>({ bar: 'bar' }) .then(response =& ...

typescripttypescript-generics

Azure Function App not recognizing TypeScript function

After executing npm run build to convert my TypeScript source code into JavaScript files, I then ran the below commands to deploy my TypeScript Azure Function successfully: func azure functionapp publish myFunctionApp However, upon completion of the comm ...

node.jstypescriptazureazure-functions

Tips for accessing the nested formArray value using a getter in Angular

I am currently attempting to retrieve form values using the getter method and then dynamically pushing them to update the form with values. However, I am faced with a nested array at the moment, which is causing issues with retrieving the form values. Bel ...

angulartypescriptgetformarray

Tips for incorporating a mesh into Forge Viewer v6 with Typescript

Is there a way to add meshes to Forge Viewer v6 using Type script? I've tried various methods that worked with v4, but I'm encountering issues now. private wallGeometry: THREE.BoxBufferGeometry; drawWalls() { ...

typescriptthree.jsautodesk-forgeautodesk-viewerautodesk

What is the best way to set the focus on a Vue flat-pickr component?

Having trouble setting focus to the Vue flat-pickr component. Here's an example: <flat-pickr v-model="date_opened" id="file_opened" :config="flatpickr_config_date" :disabled="disableFileInfo&q ...

javascriptvue.jsflatpickr

Leveraging vuejs to dynamically insert a URL within a function

I am attempting to dynamically bind an image path inside a method. It seems feasible, but I'm uncertain if I am implementing the code correctly. Can someone review it? Essentially, I want to retrieve the selected image from the model rather than hardc ...

javascriptvue.js

What are the steps for implementing videojs vr in a Vue.js project?

After installing the videojs vr with npm install --save videojs-vr, I attempted to use it in my project: https://i.stack.imgur.com/lSOqF.png However, I encountered this error message: https://i.stack.imgur.com/QSe1g.png Any assistance would be greatly ...

javascriptvue.jsvue-componentvideo.js

Getting a 404 error when there is a dot in the URL in Vue.js with webpack

In my Vue2 application running with the 'npm run dev' command (using the standard, official boilerplate), I utilize vue-router for routing throughout the application. There are some legacy URLs from search engines that lead to old versions of my ...

node.jsexpresswebpackvue.jsvue-router

How do I correctly submit a Vue.js application to GitHub?

After attempting to upload my files to Github, I received an error message stating that the files were too large. As a workaround, I uploaded only the content of the dist folder after building for production. Although this method worked, it is not very p ...

vue.jsgithubupload

What is the best way to ensure that the second http call only runs after the first http call has completed, and passing an argument retrieved from the first call to the

My current challenge involves hitting one API to retrieve a specific string, storing it in a variable, and then passing it to another HTTP API call. However, I'm encountering an issue where the API call requiring the argument executes but never sends ...

angulartypescriptapihttp

Creating classes dynamically in Angular2 and Ionic2

Dealing with a dilemma here. I am attempting to dynamically create an instance of a class from its superclass. Essentially, I have an AbstractClass and multiple classes that inherit from it. Check out this functional example in the TypeScript playground : ...

angulartypescriptionic2

Combining the Partial<CssStyleDeclaration> union type with a dictionary can lead to potential typing complications when the implicit any flag is

Using VueJS v-bind:style binding makes it possible to set CSS variables. I am attempting to create a union type that allows for the object passed to v-bind:style to retain typings for CssStyleDeclaration, while also being relaxed enough to accept an arbitr ...

typescriptvue.js

The Nuxt.js landing page is having trouble loading, but all other components are functioning perfectly

I successfully created a blog using Nuxtjs and everything was working perfectly in development mode. However, when I deployed the application to my cPanel server, the landing page (index.vue) at showed an error message saying This page could not be found ...

javascriptvue.jsroutesnuxt.jsnuxtjs

When attempting to utilize the dispatch function in a class-based component, an invalid hook call error may

I am a beginner with react-redux. I currently have this code that uses react, redux, and TypeScript. The code utilizes a class-based component and I am attempting to use dispatch to trigger an action to increment the value of counter. However, I encountere ...

reactjstypescriptreduxreact-redux

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

htmlangulartypescript

Instructions on invoking the validate function of an Element-UI form

In my current Vue.js project, I am working on designing forms using Element-UI. One of the requirements is to ensure that the form is valid before proceeding with any further actions once the submit button is clicked. I am seeking guidance on how to acces ...

vue.jselement-ui

Angular 5 Dilemma: Exporting UI Components without Locating Template

My current project involves developing UI Components that will be used in various web projects within the company. Our plan is to publish these UI components as an npm package on our local repository, and so far, the publishing process has been successful. ...

angulartypescriptrollup

Experience a new way to log in with signInWithPopup, leaving the Email

I am currently working on developing a registration form that utilizes Firebase auth for authentication. There are two methods available for registering users: Using Email / Password Provider Using Google Auth Provider Here is the process I follow: Ste ...

typescriptfirebasenext.jsfirebase-authentication