javascript - 加载新的JSON数据并替换VueJS中的旧数据

我正在使用一个v-for循环，其中包含从json文件获取的数据。在加载新的json文件并替换旧的json文件之后，是否有方法重新呈现dom和整个v-for循环？
我试图实现的是在单击并更新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;
            });
        }
    }
});

最佳答案

上面的代码应该足以自动更新dom。但是有两个错误和一件事你应该考虑。
匿名函数在JavaScript中具有不同的作用域。这意味着，当您有一个匿名函数function(response)时，您将失去vue实例this的作用域。为了处理这种情况，如果项目中支持箭头函数，则必须使用箭头函数，或者在输入匿名函数之前将this保存到另一个变量中。

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;
        });
    }
}
});

另外，如果您有这个确切的代码，您应该在浏览器中收到一个未定义产品的错误。

关于javascript - 加载新的JSON数据并替换VueJS中的旧数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42002106/