Функция setInterval не работает в шаблоне Vue - PullRequest
Новая
       25

Функция setInterval не работает в шаблоне Vue

1 голос
/ 07 мая 2019

Я пытаюсь вызвать функцию, используя setInterval в методе объекта Vue, но это не работает.

Я использую событие щелчка для вызова login() метода 

<!--login.vue-->
<div ref="login_btn" class="login-btn btn" :style="btnLoadingSyle" 
@click="!isBtnLoading && login()">
     {{isBtnLoading ? 'Logining...' : 'Login'}}
</div>

затем в login() Я пытаюсь сделать это 

//login.vue
login: function(event) {
            var that = this;

            if (this.checkInput()) {
                console.log(this.username + ' ' + this.password);
            } else {
                return;
            }

            this.isBtnLoading = true;
            this.btnLoadingSyle = {
                'background-color': "#515151",
                'color': "#ffffff"
            }

            var buf = Buffer.from(`${this.username} ${this.password}`);
            var count = 0;

            console.log("begin");
            this.timer = setInterval(() => {
                console.log("interval");
            }, 1000);
        },

затем я монтирую этот шаблон Vue в div в index.html 

//index.html
<script>
...
const login = new Vue(Login).$mount('#login');
...
</script>

Затем я использую npm start, чтобы запустить мое электрон приложение, но setInterval() полностью не работает, когда я ввожу имя пользователя и пароль и нажимаю.

В консоли разработчика я пытаюсь прочитать login.timer, и это результат 

> console.log(login.timer)
  VM257:1 null
< undefined
  login.vue:185 user 12345
  login.vue:199 begin
> console.log(login.timer)
  VM260:1 Timeout {…}
< undefined

Видно, что до того, как я нажму div, я не могу прочитать timer, но после того, как я нажму, timer получит значение из setInterval, и login() выглядит хорошо, но я могу ' каждую секунду не вижу никакого вывода.

setInerval работает правильно в index.html

Я действительно запутался в этой проблеме и с нетерпением жду каких-то идей.

Заранее спасибо.

Редактировать

Наконец-то я нахожу причину, вероятно, в объеме

Я просто двигаюсь 

import { setInterval, clearInterval, setTimeout } from "timers";

от login.vue до index.html
и это работает.

Спасибо, ребята.

...