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

【问题标题】：Load new JSON data and replace the old one in VueJS在 VueJS 中加载新的 JSON 数据并替换旧的
【发布时间】：2017-06-19 12:25:48
【问题描述】：

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

【问题讨论】：

标签： javascript json vue.js

【解决方案1】：

上面的代码应该足以自动更新您的 DOM。但是，有 2 个错误和 1 件事您应该考虑。

匿名函数在 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;
        });
    }
}
});

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

【讨论】：

感谢您的回答。也许我的问题不够清楚。问题是，当我正确地从 JSON 中获取新的“产品”时，我可以看到 DOM 中的更新，但我想要实现的是只显示来自新数据的产品并从 DOM 中删除旧的产品。
通过设置this.products=something，你已经告诉 Vue 你想在数组中放置新数据，它会用这些数据为你重新渲染 DOM。在那里没有得到你想要的视觉效果。
是的，确实有效。这就是我的意思 - 初始 data1.json 有 5 个产品。如果我将“this.products”设置为具有 3 个产品的 data2.json，则 DOM 会显示所有 8 个产品，而不是仅显示 3 个，即使该控制台在产品数组中仅显示 3 个对象。
这很奇怪。除非您不将数据推送到数组，否则它应该替换整个数组。这是一个小提琴，显示jsfiddle.net/z11fe07p/489
好的，我发现问题出在哪里，但我不明白为什么。当我从循环项目中删除过渡时，它现在可以正常工作。所以不知道为什么，但是当我添加 transition="stagger" stagger="100" 时，旧产品会获得 leave 类，但不会从 DOM 中删除。

【解决方案2】：

一旦您更新了products 数据，它会自动将 DOM 更改为最新数据，因为 vue 数据是响应式的。我在您的代码中看到的一个错误是，您在 this.$http 块内可能有错误的 this。而不是使用function() 语法，而是使用arrow function，它不会绑定它自己的this、arguments、super 或new.target，如下所示：

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

【讨论】：