Vue.js v-forの中だとthisのスコープが変わる

備忘録

v-forの中だとthisの値が参照できない

以前Vue.jsで、thisの値をv-forの中で参照しようとしたところ、うまく参照できませんでした。

またv-forの外だとちゃんとthisの値が参照できたので備忘録として掲載しておきます。

サンプルコード

以下のサンプルコードのように、v-forの中でthisの値を参照しようとすると、うまく参照できませんでした。

<template>
    {{ this.anyVariable }} # ここではthisが参照できる
<li v-for="(item, $index) in items" :key="$index">
    {{ this.anyVariable }} # ここではthisが参照できない
    {{ item.anyVariable }} # v-for内でitemが参照できる
    .
    .
    .
</li>
</template>

対処方法

とりあえず、上記のサンプルコードのようにコンポーネントで処理をさせることは、thisが参照できなくて無理だったため、itemsをVue.js(JS)で処理している部分で行うことにしました。

Vue.js(JS)の処理のところでは、thisの値もitemの値も参照できるため、条件分岐などの処理もさせることができ、うまく処理することができました!

まとめ

いかがでしたでしょうか。

普段サーバサイドの言語しかやらないと、Vue.jsReactなどのフロント言語って結構躓きますよね、、、

詰まったところは、都度備忘録として残して次回から同じミスをしないようにしていけたらいいですね!

コメント