Vue еквівалент setTimeout?

Я створюю систему кошиків для покупок з Laravel та Vue. Коли я додаю товар у кошик, я відображаю повідомлення підтвердження, перемикаючи змінну Vue, яку спостерігає v-if:

<div class="alert alert-success" v-if="basketAddSuccess" transition="expand">Added to the basket</div>

І JS:

addToBasket: function(){
                item = this.product;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
            }

(І так, незабаром я додаю це в тодішньому улові).

Це працює нормально, і повідомлення з’являється. Однак я хотів би, щоб повідомлення знову зникло через певний час, скажімо, кілька секунд. Як я можу це зробити за допомогою Vue? Я пробував, setTimeOutале Vue, схоже, не подобається, кажучи, що це невизначено.

EDIT: Я неправильно писав, setTimeoutяк ідіот. Однак це все одно не працює:

Моя функція:

addToBasket: function(){
                item = this.photo;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                setTimeout(function(){
                    this.basketAddSuccess = false;
                }, 2000);
            }

Функція стрілки

Найкращий і найпростіший спосіб вирішити цю проблему - за допомогою функції стрілки () => {}:

    addToBasket() {
        var item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        // now 'this' is referencing the Vue object and not the 'setTimeout' scope
        setTimeout(() => this.basketAddSuccess = false, 2000);
    }

Це працює , тому що thisфункції стрілки , прив'язані до thisйого області видимості - в Vue, це / огороджувальні компоненти батька. setTimeoutОднак усередині традиційної функції, що викликається ,, thisпосилається на windowоб'єкт (саме тому у вас виникли помилки при спробі отримати доступ this.basketAddSuccessу цьому контексті).

Аргумент передається

Іншим способом зробити це буде передача thisяк аргументу вашої функції через setTimeoutпрототип '', використовуючи її setTimeout(callback, delay, arg1, arg2, ...)форму:

    addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Add scope argument to func, pass this after delay in setTimeout
        setTimeout(function(scope) {
             scope.basketAddSuccess = false;
        }, 2000, this);
    }

(Варто зазначити, що синтаксис передачі аргументів несумісний з IE 9 і нижче, однак.)

Місцева змінна

Інший можливий , але менш красномовний і менш заохочуваний спосіб - це прив’язати thisдо var поза setTimeout:

    addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Declare self, which is accessible inside setTimeout func
        var self = this;
        setTimeout(function() {
             self.basketAddSuccess = false;
        }, 2000);
    }

Однак використання функції стрілки повністю виключить потребу в цій додатковій змінній, і насправді її слід використовувати, якщо щось інше не перешкоджає її використанню.

зіткнувшись з тією ж проблемою, я опинився в цій темі. Для майбутнього покоління: поточна найбільш голосована відповідь намагається прив’язати „це” до змінної, щоб уникнути зміни контексту при виклику функції, визначеної в setTimeout.

Альтернативний та більш рекомендований підхід (з використанням Vue.JS 2.2 та ES6) полягає у використанні функції стрілки для прив’язки контексту до батьківського елемента (в основному „addToBasket“ s „this“ та „setTimeout“ s „this“ все одно посилався б на той самий об'єкт):

addToBasket: function(){
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        setTimeout(() => {
            this.basketAddSuccess = false;
        }, 2000);
    }

Додайте bind (this) до функції зворотного виклику setTimeout

setTimeout(function () {
    this.basketAddSuccess = false
}.bind(this), 2000)

ES6 може пов'язати "це"

setTimeout(() => {

 },5000);

Ви можете використовувати Vue.nextTick

addToBasket: function(){
                item = this.photo;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                Vue.nextTick(() =>{
                    this.basketAddSuccess = false;
                });
            }

vuejs 2

спочатку додайте це до методів

methods:{
    sayHi: function () {
      var v = this;
      setTimeout(function () {
        v.message = "Hi Vue!";
    }, 3000);
   }

після цього викличте цей метод на mount

mounted () {
  this.sayHi()
}

Кевін Мухват вище має КРАЩУ відповідь, незважаючи на лише 10 голосів проти і не вибрану відповідь.

setTimeout(function () {
    this.basketAddSuccess = false
}.bind(this), 2000)

Дозвольте пояснити, ЧОМУ.

"Функція стрілки" - це ECMA6 / ECMA2015. Це чудово діє в складеному коді або в контрольованих ситуаціях клієнта (додатки для телефонів cordova, Node.js), і це приємно і лаконічно. Це навіть, мабуть, пройде ваше тестування!

Однак, Microsoft у своїй нескінченній мудрості вирішив, що Internet Explorer НІКОЛИ НЕ ПІДТРИМУЄ ECMA2015!

Їхній новий браузер Edge працює, але це недостатньо добре для веб-сайтів, що стоять перед громадськістю.

Виконання стандартної функції () {} та додавання .bind (це), однак, є синтаксисом ECMA5.1 (який ІС повністю підтримується) для точно тієї ж функціональності.

Це також важливо у викликах ajax / post .then / else. В кінці вашого .then (функція) {}) вам також потрібно прив’язати (this), так що: .then (function () {this.flag = true} .bind (this))

Я б додав це як коментар до відповіді Кевіна, але з якихось дурних причин публікує відповіді менше балів, ніж коментує відповіді

НЕ ПОВИНЮЙТЕ ТУЮ САМУ ПОМИЛКУ, ЯКУ Я ПОРУШИВ!

Я кодую на Mac і використовую коментарі, які проголосували за 48 балів, що чудово працювало! Поки мені не дзвонили на мої сценарії, і я не міг зрозуміти, чому. Мені довелося повернутися назад і оновити десятки викликів із синтаксису стрілки до функції () {}. Bind (цей) синтаксис.

На щастя, я знову знайшов цю тему та отримав правильну відповідь. Кевіне, я вічно вдячний.

Відповідно до "Прийнятої відповіді", це має інші потенційні проблеми, пов'язані з додатковими бібліотеками (мали проблеми з належним доступом / оновленням властивостей / функцій Vue)

У цьому немає необхідності bind(this) коли ви використовуєте функції стрілок:

  setTimeout( ()=> {
    // some code
   }, 500)

Якщо ви хочете використовувати це ключове слово у своїй функції, вам потрібно написати функцію setTimeout у ES6

setTimeout(() => {
   this.filters.max_budget_gt_eq = this.budgetHigherValue;
}, 1000);

Функція стрілки

Найкращий і найпростіший спосіб вирішити цю проблему - за допомогою функції стрілки () => {}:

    addToBasket() {
        var item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        // now 'this' is referencing the Vue object and not the 'setTimeout' scope
        setTimeout(() => this.basketAddSuccess = false, 2000);
    }

Це працює , тому що thisфункції стрілки , прив'язані до thisйого області видимості - в Vue, це / огороджувальні компоненти батька. setTimeoutОднак усередині традиційної функції, що викликається ,, thisпосилається на windowоб'єкт (саме тому у вас виникли помилки при спробі отримати доступ this.basketAddSuccessу цьому контексті).

Аргумент передається

Іншим способом зробити це буде передача thisяк аргументу вашої функції через setTimeoutпрототип '', використовуючи її setTimeout(callback, delay, arg1, arg2, ...)форму:

    addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Add scope argument to func, pass this after delay in setTimeout
        setTimeout(function(scope) {
             scope.basketAddSuccess = false;
        }, 2000, this);
    }

(Варто зазначити, що синтаксис передачі аргументів несумісний з IE 9 і нижче, однак.)

використовуйте this.animationStop, а не використовуйте this.animationStop ()

animationRun(){
    this.sliderClass.anim = true;
    setTimeout(this.animationStop, 500);
},

Ймовірно, це питання сфери застосування. Спробуйте замість цього:

addToBasket: function(){
    item = this.photo;
    this.$http.post('/api/buy/addToBasket', item);
    this.basketAddSuccess = true;
    var self = this;
    setTimeout(function(){
        self.basketAddSuccess = false;
    }, 2000);
}

будь ласка, використовуйте setInterval, як показано нижче:

    setInterval(()=>{this.checkOrder()},2000);