1

I'm using vue for the first time and so for I'm satisfied with what it can do. I have a problem though, I have a method in my vue instance that does a query like so :

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

Now in my HTML I have something like this :

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

Thing is, when I'm in the method, the state isn't instantly taken into account and is only rendered when exiting the method. What could I do so my loader appears as soon as this method is called and hidden when the method returns ?

To clarify what I meant : If I modify the state of loader in the method to true, it displays the loader correctly. But if I modify it to true at the start of the method and set it back to false at the end of the method, I'd expect the loader to display for the time the method executes and then disapear. But it doesn't display at all. As if the state and the rendering was only rendered outside the method and not inside.

EDIT

I did not realize the ajax request was actually returning a promise, thus the method took only a few ms, not enough to see the loader. The problem was fixed by simply using this.loading = false inside the promise.

Depado
  • 4,811
  • 3
  • 41
  • 63

1 Answers1

2

Use an arrow function in the success callback of your ajax request for this to represent the correct vue instance

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

this inside your success callback is not pointing towards the vue instance that's why you cannot access the date of properties and mutate them.

Arrow functions bind the value of this lexically pointing the correct vue instance.

Or use the concept of closure by creating a var self = this inside your method and use self inside the success callback

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

    }
}
Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78