VueJS: Replace/Update Array

Question

I currently have an array of object that I am rendering to a table. I am trying to follow the examples provided by Vuejs to use a "single source of truth" shared between multiple vues on the same page.

Overall, I am trying to make it where when vue1.refresh() is triggered, all the vues update their data when the "single source of truth" is updated. However, self.surveys = surveys; only updates the data on vue1.

Note: I am following the guide from https://v2.vuejs.org/v2/guide/state-management.html

// The single source of truth
var cache = {
    data: [{...}] // Array of objects
}

var vue1 = new Vue({
    el: "#table",
    data: {
        surveys: cache.data // Points to the single source of truth
    },        
    methods: {
        refresh: function(){
            var self = this;                 

            // After getting data back from an ajax call
            .done(function(surveys) {
                self.surveys = surveys;
            });
        },
    }
});

var vue2 = new Vue({
    el: "#table",
    data: {
        surveys: cache.data // Points to the single source of truth
    },        
    methods: {
        // Methods
    }
});

Answer 1

There are two principles of Vue that will help you here:

1. In Vue, every data item is a source of truth.
2. Only the owner of a data item should modify it.

In your example, you have three sources of truth: the one you want to be the single source, and two others that are initialized from it. Also, the one you want to be the source of truth isn't a data item, it is outside Vue.

So to start, you should have a single Vue that represents your entire application and defines any data that represents application-level state:

new Vue({
  el: '#app',
  data: {
    cache: {
      data: [...]
    }
  }
});

The two Vue objects that you created should be children of the application Vue, which is to say, components.

The parent tells the children what the truth is via props. The child can suggest changes to the truth by emitting events to the parent, but the child does not directly modify the truth. That keeps all management of the truth in one place.

Answer 2

You would need to mutate the array, not replace it.

Array.prototype.splice can do this for you, if you don't want to use something like Vuex, as suggested by Vanojx1.

Splice expects specific elements, not a complete array for insertions. Because you have an array you want to use and you need to clear the old one, the syntax is a little odd... You pass this, the start, the count to remove (the entire length), and then the elements to add (concatenated on from your new array).

Array.prototype.splice.apply([self.surveys, 0, self.surveys.length].concat(surveys));