0

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

myscript.js

new Vue({
    el: '#article',
    delimiters: ['[[ ', ']]'],
    data: {
        gooded_articles: [],
    },
    created: function () {

        //(1)
        console.log(this.gooded_articles);

        axios.get('/snsapp/gooded_articles/')
            .then(function (response) {

                //(2)
                console.log(this.gooded_articles);

                var article_ids = response.data.article_ids;

                //(3)
                console.log(article_ids);

                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)

コンソールの結果
- (1) : [__ob__: Observer] length: 0
- (2) : undefined
- (3) : (2) [1, 3]
- ReferenceError: gooded_articles is not defined

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

1 件の回答 1

0

.then()の中のthisはaxiosオブジェクトになっているようなので、.bind(this)でバインドするか、thisが変わらないようにアロー関数で書くことで解決しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。