Vueの初歩的なコードでCannot read property 'data' of undefined。。

Question

お世話になります。
初歩的な質問で恐縮ですが、Vueで下記のように書いた時にテキストエリアで書いた文字をmethodのdoAction内で取得したい時に、「実行」ボタンを押すと、
Cannot read property 'message' of undefined
のエラーメッセージが出るのは何故なのでしょうか。。

初歩的なので逆に原因が分からず混乱しております。。

<template>
  <div class="message">
    <div class="message-area">
      <p>{{ message }}</p>
    </div>
    <hr>
    <textarea v-model="message" cols="30" rows="10" />
    <button
      @click="doAction"
    >
      実行
    </button>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data: () => {
    return {
      message: 'Please Enter ..'
    }
  },
  methods: {
    doAction: () => {
      alert(this.message)
    }
  }
}
</script>

Comments

[NEO_PLANETT-777]

私も詳しくないけど、export default 部で、頭が大文字になってるからでは？
message => Message

[sutefu23]

ご回答誠にありがとうございます。
修正してみましたが、、同じ結果のようでした。

調べてみたところ、コンポーネント名はパスカルケースが推奨されているようでした。

[NEO_PLANETT-777]

文末のセミコロン；必要ですよね？
あれ？違った？？

[sutefu23]

これがですねー。。自分も最初は気持ち悪かったのですが、最近は「要らないだろ」派が席捲してるみたいなんです。。
https://blog.tai2.net/automatic_semilocon_insertion.html

少なくともVueに同梱されいてるEslintを入れるとデフォルト設定ではセミコロンを入れると弾かれます。
ああ、自分の書き方は時代遅れになったのかな、、とその時思いました。

[NEO_PLANETT-777]

自分も時代遅れですねｗ

Answer 1

Vueは初心者なので理由はまったくわかりませんが、methodsの関数の書き方に問題があるのかなと思います。
参考記事
https://michaelnthiessen.com/this-is-undefined/

上記記事によるとどうもmethodsでXXX:()=>{}の矢印関数を使うとthisにアクセスできないようです。
下記のような感じで書くとthisでアクセスできます。

<template>
  <div class="message">
    <div class="message-area">
      <p>{{ message }}</p>
    </div>
    <hr>
    <textarea v-model="message" cols="30" rows="10" />
    <button @click="doAction">
      実行
    </button>
    <button @click="doAction2">
      実行
    </button>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data: () => {
    return {
      message: 'Please Enter ..'
    }
  },
  methods: {
    doAction() {
      alert('doAction1' + this.message)
    },
    doAction2() {
      alert('doAction2' + this.message)
    }
  }
}
</script>

Comments

[sutefu23]

ああ！そうですね！
うっかりしていました。。
まさにそれによるものだと思います。

Eslintを入れているとアロー演算子を強要されるので、思わずそれで間違えてしまいました。

[NEO_PLANETT-777]

勉強になりました。

[sutefu23]

ホントありがとうございます。

自己レスですが
eslintのobject-shorthandのエラーを回避したい場合(functionを使えない場合)、下記なら可能です。

````
methods: {
doAction () {
alert(this.message)
}
```