Vue.js: Monitor Dynamic Changes To Object

Question

Problem

Changes to an object are not being detected by the listening child component.

Context

I have an empty object that is storing values as they come back from an API. This object is bound to a property in a child component.

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

Each time this method is called, a named array containing the response is added to the object.

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

What's the question? Can you provide a jsFiddle that highlights the problem? — PatrickSteele
– PatrickSteele, Commented Nov 2, 2016 at 20:33

Hammerbot · Accepted Answer · 2016-11-02 21:00:39Z

1

In VueJS, properties added to objects are not reactive. You need to use the vm.$set method to make them reactive:

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

You can read more information on this page: Reactivity in Depth

answered Nov 2, 2016 at 21:00

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Donnie Over a year ago

Hm. It fails with a message of TypeError: exp.trim is not a function. (In 'exp.trim()', 'exp.trim' is undefined). I also tried this.$set(this.$data.filterOperators, sFieldName, response.Data); with no success.

Donnie · Accepted Answer · 2016-11-03 16:59:14Z

0

For Vue 1, it should be constructed like this in order to allow Vue to detect the change to the object:

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

Reference: Reactivity in Depth

answered Nov 3, 2016 at 16:59

Donnie

6,35910 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

Vue.js: Monitor Dynamic Changes To Object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related