How can I get Vue.js to be reactive for changes to dynamically added array properties?

Question

In Vue.js, I have a data object with dynamically added/edited properties that are themselves arrays. For example, the property starts out as follows:

data: function () {
    return {
        vals: {}
    };
}

And over time, through various button clicks, etc., vals may look like the following (with the actual property names and values being 100% dynamic based on a number of factors):

vals: {
    set1: [
        {
            prop1: 123,
            prop2: 'hello'
        },
        {
            prop1: 456,
            prop2: 'bye'
        }
    ],
    set2: [
        {
            prop3: 'Why?!',
            prop4: false
        }
    ]
}

As the array properties (i.e., set1 and set2) are changed, I want to be able to react to those changes.

For example, I may do something like the following in my code:

var prop = 'set1';

this.vals[prop].push({
    {
        prop1: 789,
        prop2: 'hmmm...'
    }
});

However, when I do that, the component is not updating (I presume because I am pushing an object onto the end of a subarray of an object; and Vue.js doesn't seem to track those changes).

I have been able to force the component to be reactive by doing this.$forceUpdate(); after the above push, but I imagine there has to be a more eloquent way of getting Vue.js to be reactive when it comes to objects being pushed onto the end of object subarrays.

Does anyone know of a better way to try to do what I am trying to achieve? Thank you.

score 4 · Accepted Answer · edited Jul 15 '22 at 21:36

4

Any time you're adding a new property to an object or changing a value within an array, you need to use Vue.set().

Vue.set(this.vals, prop, [ /* ... */ ])

Ideally, you should define all your properties up front so Vue doesn't have to invalidate computed properties depending on your data model's shape. Even if you have them set to null you should try to map out all the properties you expect your component to need.

Also, in your first code block, you have a colon after your return: which would evaluate to a label, meaning your data function isn't returning anything.

edited Jul 15 '22 at 21:36

tony19

125,647
18
229
307

answered May 17 '19 at 20:05

matpie

17,033
9
61
82

The colon was a mistake. I have edited my post. Let me try `Vue.set` and I will report back. Thank you. – HartleySan May 17 '19 at 20:53
1

matpie, took me a day or two to get back around to this, but I ended up taking your advice and defining all the properties upfront. Basically, I looped through the `config` prop being passed in and dynamically built up the object returned by the `data` function to get what I wanted. As a result, I had to use the syntax `$data['set' + num]` in the template to reference the properties dynamically, but it works. Thank you. – HartleySan May 20 '19 at 15:46
Happy to help, @HartleySan! – matpie May 20 '19 at 18:57

score 0 · Answer 2 · edited Jul 16 '22 at 04:30

You could try something like this using lodash and a deep watcher..

More on deep watcher here

new Vue({
  el: "#app",
  methods: {
    setValue() {
      this.oldPeople = _.cloneDeep(this.people);
    }
  },
  mounted() {
    this.setValue();
  },
  el: "#app",
  data: {
    changed: null,
    people: [
      { id: 0, name: "Bob", age: 27 },
      { id: 1, name: "Frank", age: 32 },
      { id: 2, name: "Joe", age: 38 }
    ],
    oldPeople: []
  },
  watch: {
    people: {
      deep: true,
      handler(after, before) {
        // Return the object that changed
        let vm = this;
        let changed = after.filter(function(p, idx) {
          return Object.keys(p).some(function(prop) {
            return p[prop] !== vm.oldPeople[idx][prop];
          });
        });
        vm.setValue();
        this.changed = changed;
      },      
    }
  }
});

input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>

<div id="app">
  <div>
    <input type="text" v-for="(person, index) in people" v-model="people[index].age" />
    <div v-if="changed !== null">
      You changed:<br/>{{ changed }}
    </div>
  </div>
</div>

How can I get Vue.js to be reactive for changes to dynamically added array properties?

2 Answers2