vue.js

Vue.js、クロージャの中からthisを参照出来ない

<追記>
出来ないとおもたら色々やり方あるようです。
コメント欄をご参照下さい。

以下のようにpropsで渡した値と、li要素のカスタムデータ属性に指定した値を比較したかった。

<ul>
    <li v-for="(value, key) in lists" :data-order-id="value.id">
        {{ key }}:{{ value }}
    </li>
</ul>
props: ['lists', 'orderId'],
mounted: function () {
    let li = $('ul > li');

    // 一つ一つのli要素に対して処理
    li.each(function () {
        // propsで渡した値とカスタムデータ属性から取得した値を比較
                if ($(this).data('orderId') === this.orderId) {
            console.log($(this).data('orderId'))
        }
    });
}

この書き方だと、this.orderIdundifineとなりifの中身が実行されません。
クロージャの中からはthisを参照出来ない?っぽい。

以下のように書きます。

props: ['lists', 'orderId'],
mounted: function () {
    let li = $('ul > li');
    // クロージャの前にここで変数に格納して、比較にはこの変数を使う
        let orderId = this.orderId;

    // 一つ一つのli要素に対して処理
    li.each(function () {
        // propsで渡した値とカスタムデータ属性から取得した値を比較
                if ($(this).data('orderId') === orderId) {
            console.log($(this).data('orderId'))
        }
    });
}

これで成功しました。
スコープ大事。