（Vue.js）methodsの処理の中でdataを参照できないエラーの解決法

問題: methodsの処理で、dataの参照に失敗する

button押下時に発生するgatherResultでdataの参照に失敗するエラーが出てしまいました。

App.vue

<template>
  <div id="app">
    <form v-on:submit.prevent>
      <input type="text" id="username" value="aaa"/>
      <button @click="gatherResult">send</button>
    </form>
    <div v-if=" this.result.length !== 0 ">{{ result }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      result: []
    };
  },
  methods: {
    gatherResult: () => {
      this.result.push(document.getElementById("username").value);
    }
  },
};
</script>

エラー内容.txt

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'result' of undefined"


found in


---> <App> at /src/App.vue

       <Root>

TypeError: Cannot read property 'result' of undefined
    at VueComponent.gatherResult 

最初はdataの定義の仕方が悪いのかと思ったり、いろいろ調べていると、gatherResult の定義の仕方の問題であることがわかりました。

原因: arrow関数で定義したmethodsの処理内でthisが参照できないため

https://stackoverflow.com/questions/49417410/how-to-save-reference-to-this-in-vue-component
Vueのmethods の処理にarrow関数をなんとなく使っていたのですが、arrow関数の中ではthisが参照できないので、dataにもアクセスが出来ないようでした。

解決方: 通常の関数として定義する

通常の関数として定義すればthisを参照できるようです。

App.vue

<template>
  <div id="app">
    <form v-on:submit.prevent>
      <input type="text" id="username" value="aaa"/>
      <button @click="gatherResult">send</button>
    </form>
    <div v-if=" this.result.length !== 0 ">{{ result }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      result: []
    };
  },
  methods: {
    gatherResult(){
　　　　this.result.push(document.getElementById("username").value);
    }
  },
};
</script>

これで、button押下時のエラーはなくなりました。
以上です。