Question

我第一次使用vue，因此我对它的功能感到满意。我有一个问题，我在我的vue实例中有一个方法，它执行如下查询：

var vm = new Vue({
    el: "#app",
    data: {
        search: "",
        results: [],
        loading: false,
    },
    methods: {
        find: function(event) {
            this.loading = true;
            var siret = this.search.length > 9;
            var ep = this.$resource('/api/v1/.../{id}');
            ep.get({id: this.search, limit: 100}).then(function(response) {
                this.results = response.data;
            }, function(response) {
                // error handling
            });
            this.loading = false;
        }
    }
});

现在在我的HTML中我有这样的东西：

<div v-show="loading" style="width:100%;" class="loader"></div>

事情是，当我在方法中时，状态不会立即被考虑在内，只有在退出方法时才会被渲染。我能做什么才能在调用此方法时立即显示加载程序，并在方法返回时隐藏？

澄清我的意思：如果我将方法中loader的状态修改为true，它会正确显示加载程序。但是，如果我在方法开始时将其修改为true并在方法结束时将其设置回false，我希望加载程序在方法执行时显示然后消失。但它根本没有显示出来。好像状态和渲染只在方法之外而不是在内部呈现。

修改

我没有意识到ajax请求实际上是返回一个promise，因此该方法只花了几毫秒，还不足以看到加载器。只需在promise中使用this.loading = false即可解决问题。

Answer 1

在this的ajax请求的成功回调中使用箭头函数来表示正确的vue实例

ep.get({id: this.search, limit: 100}).then((response) => {
            this.results = response.data;
        }, function(response) {
            // error handling
        });

成功回调中的

this并未指向vue实例，这就是为什么你无法访问属性的日期并改变它们的原因。

箭头函数以词法指向正确的vue实例绑定this的值。

或者通过在方法中创建var self = this并在成功回调中使用self来使用闭包的概念

methods: {
    find: function(event) {
        var self = this;
        this.loading = true;
        var siret = this.search.length > 9;
        var ep = this.$resource('/api/v1/.../{id}');
        ep.get({id: this.search, limit: 100}).then(function(response) {
            self.results = response.data;
            self.loading = false;
        }, function(response) {
            // error handling
        });

    }
}

v-如果在方法中状态发生变化时不进行渲染

1 个答案: