Load new JSON data and replace the old one in VueJS

Question

I'm using a v-for loop with data fetched from JSON file. Is there a way to re-render the DOM and whole v-for loop after loading a new JSON file and replacing the old one? What I'm trying to achieve is load different sets of products on click and update DOM.

Vue.use(VueResource);    
var productsList = new Vue({
    el: '#vue',
    data: function () {
        return {
            products: []
        };
    },
    ready: function () {
        this.$http.get('data/data.json').then(function (response) {
            this.products = response.data;
        });
    },
    methods: {
        loadProducts: function (url) {
            this.$http.get(url).then(function (response) {
                this.products = response.data;
            });
        }
    }
});

Cristi Jora · Accepted Answer · 2017-02-02 12:28:00Z

2

The code above should be sufficient for updating your DOM automatically. There are 2 errors however and 1 thing you should consider.

Anonymous functions have different scopes in javascript. This means that when you have an anonymous function function(response) then you lose the scope of the vue instance this. In order to deal with such situations you have to either use arrow functions if you have support for them in your project or save this into another variable before entering the anonymous function.

Vue.use(VueResource);    
var productsList = new Vue({
el: '#vue',
data: function () {
    return {
        products: []
    };
},
ready: function () {
    var self=this;
    this.$http.get('data/data.json').then(function (response) {
        self.products = response.data;
    });
},
methods: {
    loadProducts: function (url) {
        var self=this;
        this.$http.get(url).then(function (response) {
            self.products = response.data;
        });
    }
}
});

Also if you have this exact code, you should've received an error in browser with products being undefined.

answered Feb 2, 2017 at 12:28

Cristi Jora

1,75215 silver badges14 bronze badges

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

5 Comments

Tomarz Over a year ago

Thanks for the answer. Maybe my question wasn't clear enough. The problem is that when I fetch new "products" from JSON correctly I can see the updates in DOM, but what I'm trying to achieve is to display only the products from new data and remove the old ones from DOM.

Cristi Jora Over a year ago

Well by setting this.products=something you already tell Vue that you want to place new data in the array and it will re-render the DOM for you with that data. Don't quite get what you want as a visual effect there.

Tomarz Over a year ago

Yes, that does work. Here's what I mean - initial data1.json has 5 products. If I set "this.products" to data2.json, which has 3 products, DOM displays all 8 products instead of only 3, even though that console shows only 3 objects in products array.

Cristi Jora Over a year ago

Well that's strange. It should replace the whole array unless you are not pushing the data to the array. Here is a fiddle showing that jsfiddle.net/z11fe07p/489

Tomarz Over a year ago

Ok I found where was the problem, but I don't understand why. It works properly now when I removed the transition from the loop items. So not sure why but when I add transition="stagger" stagger="100" the old products get the leave class but are not removed from DOM.

Saurabh · Accepted Answer · 2017-02-02 12:28:25Z

Once you update the products data it will automatically change the DOM as par the latest data, as vue data is reactive. One error I see in your code is, you may have wrong this inside the this.$http block. instead of using function() syntax, use arrow function, which does not bind it's own this, arguments, super, or new.target, like following:

Vue.use(VueResource);    
var productsList = new Vue({
    el: '#vue',
    data: function () {
        return {
            products: []
        };
    },
    ready: function () {
        this.$http.get('data/data.json').then((response) => {
            this.products = response.data;
        });
    },
    methods: {
        loadProducts: function (url) {
            this.$http.get(url).then( (response) => {
                this.products = response.data;
            });
        }
    }
});

Collectives™ on Stack Overflow

Load new JSON data and replace the old one in VueJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related