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にアクセスできていたので原因が分かりません。
よろしくお願いします。