Отображение анимации загрузки во время функции vue js

Question

Простое отображение и скрытие загрузочного элемента не выполняется во время выполнения функции Vue js.

У меня есть функция vue js, которая будет делать некоторые вещи и обновлять данные, когда это будет сделано.Я пытаюсь показать анимацию загрузки во время этого процесса.Я остановил процесс на простой цикл для целей этого обсуждения, чтобы устранить все другие проблемы (например, ajax, async и т. Д.).

Мой HTMl для кнопки выглядит следующим образом:

<button type="button" v-on:click="DoStuff()">Do Stuff</button>

Мой код vue js выглядит так:

var client = new Vue({
    el: '#client',
    data: {
        someData: []
},
methods: {
    DoStuff: function() {

        //Show Loader
        $(".loader").show();

        //Waste 5 seconds
        for (var i = 0; i < 100000000; i++) {
            var x = i;
        }

        //Hide loader
        $(".loader").hide();

        // let me know it's done.
        alert('cool');
    }

Загрузчик никогда не показывает.Если я закомментирую команду скрытия, загрузчик появится ПОСЛЕ предупреждения.Заставляет меня думать, что под капотом происходит какая-то асинхронная операция, но я не занимаюсь асинхронной работой.

Answer 1

Спасибо всем.Я должен сосредоточиться на более важной функции, которая возникла.Но я просто хотел поделиться тем, что я блестел.Это не окончательный (или) окончательный ответ, но он объясняет проблему и правильный подход.

Проблема была правильно идентифицирована Эндрю Лором, как описано далее: jQuery hide () и show () не запускается сразу же при обращении позже в функции

Лучшим (но не только) решением будет использование шины событий, как упомянуто здесь perellorodrigo: https://flaviocopes.com/vue-components-communication/

Я будуопубликуйте свое окончательное решение, когда я к нему подойду.

Answer 2

Лучше не смешивать с JQuery, просто используйте вместо этого условное отображение Vue (v-show).

В вашем загрузчике:

<div class="loader" v-show="loading"></div>

В вашем коде Vue:

var client = new Vue({
    el: '#client',
    data: {
        someData: [],
        loading: false
},
methods: {
    DoStuff: function() {

        this.loading = true;

        //Waste 5 seconds
        for (var i = 0; i < 100000000; i++) {
            var x = i;
        }

        this.loading = false;

        // let me know it's done.
        alert('cool');
    }

Answer 3

Не используйте jquery.Вы можете сделать это с помощью vuejs.

var client = new Vue({
    el: '#client',
    data: {
        someData: [],
        loading: false,
},
methods: {
    DoStuff() {

        //Show Loader
        this.loading = true;

        //Waste 5 seconds

        //Hide loader
        this.loading = true;

        // let me know it's done.
        alert('cool');
    }

и вашего HTML.

<div class="loading" v-if="loading">
    Loading....
</div>
<div v-else>
The rest of your website 
</div>

Answer 4

Вам не нужно использовать jQuery для установки и скрытия элементов на странице в зависимости от условия, фактически этот тип игнорирует цель того, для чего используются VueJS и другие внешние интерфейсы javascript.

Сначала вы должны добавить свойство под названием loading к вашему data объекту

data: {
   someData: [],
   loading: false
}

Затем в вашей функции doStuff удалите строки jquery и соответственно установите свойство загрузки

methods: {
    doStuff: function() {
        //Show Loader
        this.loading = true;

        //Waste 5 seconds
        setTimeout(() => {
           this.loading = false;
        }, 5000)
    }
}

Наконец, на ваш взгляд, добавьте эту строку

<div v-if="loading">Loading some data</div>

Я закончу это, сказав, что я также думаю, что ваш фрагмент немного испорчен.свойство methods должно быть внутри определения экземпляра Vue.

var client = new Vue({
    el: '#client',
    data: {
        someData: [],
        loading: false
    },
    methods: {
       doStuff: function() {
          //Show Loader
          this.loading = true;

          //Waste 5 seconds
          setTimeout(() => {
            this.loading = false;
          }, 5000)
       }

   }
}