[解決済み] VueのsetTimeoutに相当するもの？

質問

LaravelとVueでショッピングカートシステムを作っています。商品をカゴに入れると、v-ifで監視しているVueの変数をトグルして確認メッセージを表示しています。

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

(そして、はい、私はまもなくこれを then-catch で追加する予定です)。

これは問題なく動作し、メッセージは表示されます。しかし、ある時間、例えば数秒後にメッセージが再び消えるようにしたいのです。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);
    }

(ただし、argを渡す構文はIE9以下と互換性がないことに注意が必要です)。

ローカル変数

もう一つ 可能 しかし、あまり雄弁でなく、推奨されない方法は this の外側の変数に 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);
    }

しかし、arrow関数を使えば、この余分な変数は必要なくなるので、何か他の妨げがない限り、本当に使うべきです。