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

我正在使用一个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。有2个错误，1件事你应该考虑。< /P> 匿名函数在javascript中具有不同的作用域。这意味着，当您有一个匿名函数functionresponse时，您将失去此vue实例的作用域。为了处理这种情况，您必须使用箭头函数（如果您在项目中支持它们），或者在输入匿名函数之前将其保存到另一个变量中

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

---

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

上面的代码应该足以自动更新您的DOM。有2个错误，1件事你应该考虑。< /P> 匿名函数在javascript中具有不同的作用域。这意味着，当您有一个匿名函数functionresponse时，您将失去此vue实例的作用域。为了处理这种情况，您必须使用箭头函数（如果您在项目中支持它们），或者在输入匿名函数之前将其保存到另一个变量中

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

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

< P>一旦更新了产品数据，它将自动将DOM与最新的数据相比较，因为VUE数据是反应性的。我在代码中看到的一个错误是，您可能在this.$http块中有错误。使用函数语法，而不是使用函数语法，它不绑定自己的、或，如下所示：

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

当您更新产品数据时，它将自动将DOM与最新数据相比较，因为VUE数据是反应性的。我在代码中看到的一个错误是，您可能在this.$http块中有错误。使用函数语法，而不是使用函数语法，它不绑定自己的、或，如下所示：

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获取新产品时，我可以在DOM中看到更新，但我试图实现的是只显示来自新数据的产品，并从DOM中删除旧的产品。通过设置这个。products=您已经告诉Vue要在数组中放置新数据，它将使用该数据为您重新呈现DOM。没有得到你想要的视觉效果。是的，这确实有效。我的意思是，initial data1.json有5个产品。如果我将this.products设置为data2.json，它有3个产品，DOM将显示所有8个产品，而不是仅显示3个，即使控制台在产品数组中仅显示3个对象。这很奇怪。它应该替换整个数组，除非您没有将数据推送到数组中。这是一把小提琴，显示我找到了问题所在，但我不明白为什么。现在，当我从循环项中删除转换时，它可以正常工作。所以我不知道为什么，但是当我添加transition=stagger-stagger=100时，旧产品得到了leave类，但没有从DOM中删除。谢谢你的回答。也许我的问题不够清楚。问题是，当我正确地从JSON获取新产品时，我可以在DOM中看到更新，但我试图实现的是只显示来自新数据的产品，并从DOM中删除旧的产品。通过设置这个。products=您已经告诉Vue要在数组中放置新数据，它将使用该数据为您重新呈现DOM。没有得到你想要的视觉效果。是的，这确实有效。我的意思是，initial data1.json有5个产品。如果我将this.products设置为data2.json，它有3个产品，DOM将显示所有8个产品，而不是仅显示3个，即使控制台在产品数组中仅显示3个对象。这很奇怪。它应该替换整个数组，除非您没有将数据推送到数组中。这是一把小提琴，显示我找到了问题所在，但我不明白为什么。现在，当我从循环项中删除转换时，它可以正常工作。所以不知道为什么，但当我添加transition=stagger-stagger=100时，旧产品会得到leave类，但不会从DOM中删除。