Question

我正在使用带有从JSON文件获取的数据的v-for循环。有没有办法在加载新的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;
            });
        }
    }
});

Answer 1

上面的代码应足以自动更新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;
        });
    }
}
});

此外，如果你有这个确切的代码，你应该在浏览器中收到一个错误的产品错误。

Answer 2

更新products数据后，它会自动将DOM更改为最新数据，因为vue数据是被动的。我在您的代码中看到的一个错误是，您在this块中可能有错this.$http。而不是使用function()语法，请使用arrow function，它不会绑定它自己的this，arguments，super或{{3} }，如下：

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

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

2 个答案: