JSONデータをDjangoビューからVue.jsインスタンスメソッドに渡す方法

私はVue.jsに新しいです。 DjangoビューからJSONデータをvueインスタンス（メソッド）に渡す方法JSONデータをDjangoビューからVue.jsインスタンスメソッドに渡す方法

Views.py

def articles(request): 
    model = News.objects.all() # getting News objects list 
    random_generator = random.randint(1, News.objects.count()) 
    context = { 
       'title' : 'Articles' , 
       'modelSerialize' : serializers.serialize('json',News.objects.all()), 
       'num_of_objects' : News.objects.count() , 
       } 
    return render(request, 'articles.html',context)

VueScript.js

new Vue({ 

    el: '#list-Of-Articles-Displayed', 
       data: { 
        count: 0 
       },  
     ready: function() { 


      this.$http.get('http://127.0.0.1:8000/article/').then(function (response) { 
       response.status; 
       console.log(response); 
      }, function (response) { 
        alert("error "); 
       // error callback 
      }); 

     } 

     })

テンプレート（article.html）

<div id = "list-Of-Articles-Displayed" class = "col-lg-10" v-for="news in loadArticles" > 
<div class = "col-lg-11"> 
    <br> 
    <a href = "<%news.id%>" ><%news.title%></a> 
    <h5><small><%news.date%></small></h5> 
    <p> 
     <%news.body%>...<span style = "color : purple" > <a href = "<%news.id%>"> Call to Action</a> 
     <br><br></span> 
    </p> 
</div>

JSONデータではなく、VueScript.jsのJSONデータにアクセスしようとしていますが、完全なHTML構造になっています。

誰でも助けてくれますか？おかげ

出典

2016-03-28 light_ray

はたぶんあなたの代わりにJsonResponseを使用する必要があります。

from django.http import JsonResponse 

def articles(request): 
    model = News.objects.all() # getting News objects list 
    random_generator = random.randint(1, News.objects.count()) 
    context = { 
       'title' : 'Articles' , 
       'modelSerialize' : serializers.serialize('json',News.objects.all()), 
       'num_of_objects' : News.objects.count() , 
       } 
    return JsonResponse(context)

をあなたが取得している問題は、それがtext/htmlのコンテンツタイプと何をAJAX呼び出しのために必要と戻りレスポンスをレンダリングしている応答でありますコンテンツタイプはapplication/jsonです。 JsonResponseは、応答に適切なコンテンツタイプがあることを確認するための迅速な方法です。あなたはこのStackOverflowのをJsonResponse hereについての詳細を読んだり、読むことができますanswer

出典

2016-03-28 04:11:24 2ps

私はJSONデータのみを取得し、ページに表示しています。jsonデータを含む完全なhtmlページを取得する方法 –

あなたのVUE-コンポーネントにHTMLを追加して、例えば使用して、安らか-API経由でJSONを提供することができますDjango Restフレームワーク。 APIを作るためにあなたがVUEにVUE-ルータを追加します呼び出します。 https://github.com/vuejs/vue-router

出典

2016-07-08 12:58:42 musicformellons

たぶん、このように：VUEで

views.py

context = {'page_data' : json.dumps({"title": "Articles"})}

article.html

<body data="{{ page_data }}">

インスタンス

beforeMount(){ 
    this.page = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data') || '{}'); 
}

出典

2017-05-05 02:07:47

JSONデータをDjangoビューからVue.jsインスタンスメソッドに渡す方法

答えて

関連する問題