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, похоже, не нравится, говоря undefined.

РЕДАКТИРОВАТЬ: Я искал setTimeOut как идиот. Однако он все еще не работает:

Теперь моя функция:

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

Ответы

Ответ 1

Вы можете попробовать этот код:

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

Мини-объяснение: внутри функции, вызываемой setTimeout, this НЕ объект VueJs (это глобальный объект setTimeout), но self, также вызываемый через 2 секунды, по-прежнему является объектом VueJs.

РЕДАКТИРОВАТЬ 1: Пример с функцией стрелки

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

Ответ 2

столкнувшись с той же проблемой, я оказался в этой теме. Для будущего поколения: текущий самый проголосовавший ответ пытается привязать "this" к переменной, чтобы избежать изменения контекста при вызове функции, которая определена в setTimeout.

Альтернативный и более рекомендуемый подход (с использованием Vue.JS 2.2 и ES6) заключается в использовании функции стрелки для привязки контекста к родительскому (в основном "addToBasket" "this", а "setTimeout" "this" все равно относятся к одному и тому же объекту):

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

Ответ 3

Добавить привязку (this) к вашей функции обратного вызова setTimeout

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

Ответ 4

ES6 может связать "это"

setTimeout(() => {

 },5000);

Ответ 5

vuejs 2

сначала добавьте это к методам

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

после этого вызовите этот метод на установленном

mounted () {
  this.sayHi()
}

Ответ 6

Вы можете использовать Vue.nextTick

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

Ответ 7

Если вы хотите использовать ключевое слово this в своей функции, вам нужно написать функцию setTimeout в ES6

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

Ответ 8

Кевин Мухват выше имеет ЛУЧШИЙ ответ, несмотря на то, что только 10 голосов проголосовали, а ответ не был выбран.

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

Позвольте мне объяснить, почему.

"Функция стрелки" - ECMA6/ECMA2015. Он отлично работает в скомпилированном коде или в контролируемых клиентских ситуациях (приложения для телефонов Cordova, Node.js), и он хорош и лаконичен. Это даже, вероятно, пройдет ваше тестирование!

Однако Microsoft в своей бесконечной мудрости решила, что Internet Explorer НИКОГДА НЕ ПОДДЕРЖИТ ECMA2015!

Их новый браузер Edge делает, но этого недостаточно для публичных веб-сайтов.

Однако выполнение стандартной функции() {} и добавление .bind(this) - это синтаксис ECMA5.1 (который полностью поддерживается) для точно такой же функциональности.

Это также важно в вызовах ajax/post.then/else. В конце вашего .then(function) {}) вам также нужно связать (this) так:.then(function() {this.flag = true}.bind(this))

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

НЕ СДЕЛАЙТЕ ОДНУ ИСКУСНУЮ ОШИБКУ!

Я пишу код на Mac и использую комментарии, набранные 48 баллами, которые отлично сработали! До тех пор, пока мне не позвонили некоторые сценарии, и я не мог понять, почему. Мне пришлось вернуться назад и обновить десятки вызовов от синтаксиса стрелок до синтаксиса function() {}. Bind (this).

К счастью, я снова нашел эту ветку и получил правильный ответ. Кевин, я всегда благодарен.

Согласно "Принятому ответу", у этого есть другие потенциальные проблемы, связанные с дополнительными библиотеками (были проблемы с правильным доступом/обновлением свойств/функций Vue)

Ответ 9

использовать this.animationStop, не использовать this.animationStop ()

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

Ответ 10

При использовании функций стрелок нет необходимости bind(this):

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