vue.js +axiosでデータベースの値を$dataに格納したい

Question

前提・実現したいこと

Djangoでwebアプリを作成しており、template内でVue.jsを使用しています。
axiosを使ってデータベースにアクセスしており、データの受け渡し自体は上手くいっているようなのですが、.then()の中からthis.$dataにアクセスしようとすると何故かundifinedになってしまいます。

発生している問題・エラーメッセージ

ReferenceError: gooded_articles is not defined

該当のソースコード

######myscript.js

new Vue({
    el: '#article',
    delimiters: ['[[ ', ']]'],
    data: {
        gooded_articles: [],
    },
    created: function () {
        console.log(this.gooded_articles); //(1)
        axios.get('/snsapp/gooded_articles/')
            .then(function (response) {
                console.log(this.gooded_articles); //(2)
                var article_ids = response.data.article_ids;
                console.log(article_ids); //(3)
                for (var i = 0; i < article_ids.length; i++) {
                    gooded_articles.push(article_ids[i]);
                }
            })
            .catch(function (error) {
                console.log(error);
            })
    },
});

######urls.py

urlpatterns = [
    path('gooded_articles/', views.GoodedArticles.as_view(), name='gooded_articles'),
]

######views.py

class GoodedArticles(APIView):
    authentication_classes = (authentication.SessionAuthentication,)
    permission_classes = (permissions.IsAuthenticated,)

    def get(self, request):
        good_instances = Good.objects.filter(pusher=request.user)
        article_ids = []
        for good_instance in good_instances:
            gooded_article = good_instance.article
            article_ids.append(gooded_article.id)
        data = {
            'article_ids': article_ids,
        }
        return JsonResponse(data, safe=False)

試したこと

console.logの結果
(1) : [ob: Observer] length: 0
(2) : undefined
(3) : (2) [1, 3]

参考にしたコードでは.then()内からもthis.$dataにアクセスできていたので原因が分かりません。
よろしくお願いします。

Answer 1

コールバックでfunction(response){}とかくとthisはその呼び出し元に変わるんで
Vue内だとアロー関数で書くほうがthis変わらなくていいと思います。

         axios.get('/snsapp/gooded_articles/')
            .then((response) => {
                console.log(this.gooded_articles); //(2)
                var article_ids = response.data.article_ids;
                console.log(article_ids); //(3)
                for (var i = 0; i < article_ids.length; i++) {
                    gooded_articles.push(article_ids[i]);
                }
            })
            .catch( (error) => {
                console.log(error);
            })

Comments

[shun173]

ありがとうございます。
こちらの方法でも解決できました。

Answer 2

then()の中のthisがaxiosのオブジェクトになっていると思います。
bindを使えば出来るかと思います。
vue.jsのaxios内でthisを使う

new Vue({
    el: "#article",
    delimiters: ["[[ ", "]]"],
    data: {
        gooded_articles: [],
    },
    created: function () {
        console.log(this.gooded_articles); //(1)
        axios
            .get("/snsapp/gooded_articles/")
            .then(
                function (response) {
                    console.log(this.gooded_articles); //(2)
                    var article_ids = response.data.article_ids;
                    console.log(article_ids); //(3)
                    for (var i = 0; i < article_ids.length; i++) {
                        gooded_articles.push(article_ids[i]);
                    }
                }.bind(this)
            )
            .catch(
                function (error) {
                    console.log(error);
                }.bind(this)
            );
    },
});