67203


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

**myscript.js**

[code]

    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);
                })
        },
    });
    
[/code]

**urls.py**

[code]

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

**views.py**

[code]

    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)
    
[/code]

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

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


CC BY-SA 4.0
2020-06-01T10:45:31.743
67192
2021-04-04T00:51:42.883
2021-04-04T00:51:42.883
32986
40433
question
python javascript django vue.js axios
vue.js +axiosでデータベースの値を$dataに格納したい


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


CC BY-SA 4.0
2020-06-02T00:29:44.680
67203
2020-06-02T00:29:44.680
40433
67192
answer