JavaScript/Vue.js methodsの関数内でdata関数内の変数にアクセスする方法について

Question

JavaScript初心者です。Vue.jsのコードを見ていて疑問に思ったことがあるので質問します。

「methodsの関数内でdata関数内の変数にアクセスする方法」について調べていると、以下のコードが見つかりました。

data: function ()  {
      return {
         questions: [],
         sendButtonDisable : false
      }

      },

      methods: 
      { 
         postQuestionsContent : function()
         {
            var that = this;
            that.sendButtonDisable = true;
         }
      }

https://stackoverflow.com/questions/36176073/what-is-vue-way-to-access-to-data-from-methods より抜粋

メソッドの関数内では、一度、thisを変数に格納して、that.XXXの形で代入しています。

1. this.XXXの形では、thisが関数そのものを指してしまう（ここでは、postQuestionContent）から代入できないのでしょうか？

2. なぜ、一度格納すると代入できるしょうか？1.と同じ結果になる気がしてしまいます。

3. this.$data.sendButtonDisableでも同様のことが可能だとありますが、ESLintではエラー?扱いになっていました($dataが定義されてない)。どちらのほうが一般的でしょうか？

Answer 1

1. 実際は this.sendButtonDisable = trueでも動きます。出典のStackOverFlowにもその旨記載があります
2. 例の場合は、thatへ代入せずとも動作しますが、代入するとスコープが変わります。このQiita記事に理由が、まとまってますので、詳細はそちらに譲ります。
3. 個人的な意見かもしれませんが、this.$dataは一般的ではないかと思います。

Comments

[退会済みユーザー]

postQuestionsContentのfunctionの中に、もう１つfunctionがあり、その中でsendButtonDisable=trueをする場合はどうなりますか？

[w2-yamaguchi]

thisのままでは動作しません。thatへ代入すれば動きます。