Vue.js: Keep Track of Object's Changing Attributes

Issue

The child component is not detecting changes made to an object.

Situation

I am utilizing an empty object to store values retrieved from an API, which is linked to a property in a child component.

data () {
  return {
    filterOperators: {}
  };
},

Every time the method is invoked, a named array containing the response is appended to the object.

getfilterOperators: function (fieldName) {
  this.filterOperatorsAction(fieldName, response => {
    this.$data.filterOperators[fieldName] = response.Data;
  });
}

Answer №1

VueJS does not automatically make properties added to objects reactive. To achieve reactivity, one must utilize the vm.$set method:

retrieveFilterOptions: function (fieldName) {
  this.fetchFilterOptions(fieldName, response => {
    this.$set(this.filterOptions, fieldName, response.data);
  });
}

For a more comprehensive understanding, you can refer to the following link: Exploring Reactivity in VueJS

Answer №2

When working with Vue 1, ensure that your code is structured in a way that allows Vue to accurately detect changes in the object. Here's how to construct it:

this.$set('filterOperators.' + fieldName, response.data);

For further information, check out: Reactivity in Depth

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

"React issue: Troubleshooting problems with using .map method on arrays of

I am struggling with the following code: const displayData = (data) => { console.log(data);// this displays an array of objects if (!data.length) return null; return data.map((movie, index)=>{ <div key={index} className=&qu ...

Retrieve the Element from the Shadow DOM or leverage the main site's styles

I am currently involved in a project that utilizes Polymer (still on version 1.7, but we are planning to switch to a different technology instead of upgrading). My task involves exploring ways to integrate DynamicYield, a personalization platform that inse ...

Automatically injecting dependencies in Aurelia using Typescript

Recently, I started working with Typescript and Aurelia framework. Currently, I am facing an issue while trying to implement the @autoinject decorator in a VS2015 ASP.NET MVC 6 project. Below is the code snippet I am using: import {autoinject} from "aure ...

How can I modify the background color of a dimmer in Semantic-UI framework?

How can I change the color of the dimmer in my modal when I am unable to do so currently? <div class="ui modal"> <i class="close icon"></i> <div class="header"> Profile Picture </div> <div class="content"> ...

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Is it possible to update HTML content using JavaScript or JQuery? https://i.sstatic.net/EWOXg.png I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery ...

Issues with Angular Routes handling JSON array routes

Encountering an Issue with Angular Routing I'm relatively new to Angular and making good progress. I want Angular's routing functions to be dynamic so I created a small api for Angular to fetch from, returning an array. However, when I iterate o ...

Sorting an array of objects using an array of corresponding IDs

Given an array activeIds which contains the ids of active services and another array servicesList which holds objects of various services. For example, let's consider: activeIds = [202, 204] serviceList = [{ "id":201, ...

What is the best way to convert an array of objects into a string in nodejs?

[ RowDataPacket { House_Name: 'Merlin 5th Avenue', no_of_rooms: 6, Cost: 3400000, PropertyId: 2 }, RowDataPacket { House_Name: 'Presidential Building', no_of_rooms: 5, Cost: 3500000, PropertyId: 106 ...

What is the correct way to update a value in React context?

In my current setup, I have the ColorContext declared as follows: const ColorContext = React.createContext("") I am attempting to create a basic function that can alter the context value, which will be utilized as a global state variable in various other ...

Display the BootstrapVue Dropdown (b-dropdown) by clicking on a button

Currently using Vue.js version 2.6.10 and BootstrapVue version 2.0.0-rc.20. The goal is to dynamically display a dropdown menu upon clicking a separate button within a single file component. <template lang='pug'> div b-button(@click=&apo ...

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

I have been utilizing the Diagram.makeSVG() method to create an SVG from my diagram. Subsequently, I appended the SVG to a new empty tab using this script (diagram represents my Diagram Object): function print() { var newTab = window.open(), svg ...

Checking a text input using JavaScript

Looking for some guidance on how to validate a textbox before calling PHP when clicking the SUBMIT button. Here is my code: <html> <head> <script> function myfunction(val) { var x=document.getEl ...

jquery-edit-in-place

Recently, I started using the edit-in-place plugin available at: I am impressed by its performance! However, I am facing a challenge. I need to implement a function that checks if the new text entered is empty. If it is empty, I want to display an error a ...

PHP's 'include' function is now being ported into modern Javascript as a new method

As the library of JS frameworks continues to expand, I'm wondering if there is a simple JS replacement or alternative for PHP's 'include' function. Is PHP include still a relevant method for including chunks of code, or are there better ...

Tough Javascript/jQuery Animation (Spinner/Scroller)

I want to create a feature where clicking a button makes a div spin with randomized contents, eventually slowing down and stopping at a specific point. I'm not sure how to begin this process. For reference, here's an example of what I have in mi ...

Angularjs ng-class directive: remove a class when a different condition becomes true

The question may not be crystal clear, but I am struggling to come up with a better way to phrase it. My goal is to emphasize a table row using ng-class and conditions. Here's the snippet of code I'm currently working with: <tr ng-class="{sel ...

Encountering problems when trying to establish a connection to my MySQL database while utilizing a REST API server built

As a newcomer to coding servers and JavaScript, I am currently taking steps to establish a REST API server and connect it with my SQL database locally. My setup involves running Ubuntu 18.04 with NODE js. So far, I have managed to successfully create a RES ...

Transferring data from AJAX to PHP class methods

Q. Is it feasible to transfer data from ajax to a specific php class with functions? For instance, verifying a username on the registration form to check if the user already exists. This form is straightforward and will gather a username input along with ...

Using JavaScript regular expressions to validate currency without relying on jQuery

Looking for a solution to create a money mask for an input field without using jquery in my application. Is it possible to achieve this using regular expressions with 'on key up' events, for example? Below is the code snippet: <tr> & ...

Strange behavior observed when converting Javascript array to object

Check out this code: let example = []; example.someData = "wow"; console.log(example); // output: [ someData: 'wow' ] console.log(JSON.stringify(example)); // output: [] console.log(example.someData); // output: wow console.log(JSON.stringi ...