vue.jsでdata属性に定義した空の配列が参照されない

Question

タイトル通りでdata属性に定義した配列が参照されません。

以下の様にvueのdata属性に文字列nicknamae,配列categoriesを定義しています。
しかし、nicknameは参照されているのですが、配列categoriesは参照されず、
TypeError: Cannot read property 'categories' of undefinedと出てしまいます。
apiでデータを取ってきた後、nicknameとcategoriesにそれぞれの値を代入(categoriesはeachでオブジェクトを回して配列として代入)していますが、そもそもcategoriesという配列が定義されていない状態です。
categories:[]というデータの定義の仕方、もしくはthis.categoriesという記載が間違っているのでしょうか？
よろしくお願いします。

// edit.vue
<template>
  <v-app id="performers_edit">
            <v-text-field label="ニックネーム" id="nickname" v-model="nickname"  color="green darken-5"></v-text-field>
            <Search :charas="charas"></Search>
            <v-btn elevation="2" fab icon outlined raised tile></v-btn>
  </v-app>
</template>

<script>
import axios from 'axios';
import Search from '../parts/search'
export default{
    data: function() {        
        return{
            nickname: '',
            categories: [],
        }
    },
    components: {　
        Search
    },
    created: function() {
        let id = localStorage.getItem("id");
        axios
            .get('http://localhost:3000//users/'+ id +'/edit.json', {
 　　　　　　　　//...省略
            })
            .then((response) => {
                this.nickname = response.data.nickname
                response.data.categories.forEach(function(value){
                    this.categories.push({ id: value.id, name:value.name })
                    }
                );
            })
            .catch(error => {
                alert(error);
        })
    }
}
</script>

Answer 1

function の中の this が Vue インスタンスではなく別のものを指しているのだと思います。
arrow function を使って以下のように記述してみるとどうでしょうか。

response.data.categories.forEach((value) => {
    this.categories.push({ id: value.id, name:value.name })
});

this が何を指すかは、書き方や記述場所によって変わってくるので注意が必要です。

Comments

[widget11]

ありがとうございます！！！エラーが解決しました！
しかしなんでアローだとthisをしっかり指すようになるのですかね？
アローはただの省略系かと思っていましたが。

[yh1224]

arrow function は function の代替となる新しい構文ですが、同等ではないのです。。
詳しくは以下に書かれています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions