Carica i dati JSON per la prima richiesta e per visualizzare gli stessi nella Home Page

Question

Sto utilizzando Vue.js per la prima volta. Ho bisogno di serializzare gli oggetti di Django

views.py

def articles(request): 
     model = News.objects.all() # getting News objects list 
     modelSerialize = serializers.serialize('json', News.objects.all()) 
     random_generator = random.randint(1,News.objects.count())  
     context = {'models':modelSerialize, 
        'title' : 'Articles' , 
        'num_of_objects' : News.objects.count() , 
        'random_order' : random.randint(1,random_generator) , 
        'random_object' : News.objects.get(id = random_generator) , 
        'first4rec' : model[0:4], 
        'next4rec' : model[4:], 
        } 
     return render(request, 'articles.html',context) 

ho cercato di visualizzare i dati JSON serializzati in html il suo bel lavoro lì,

Ora, come inizializzare dati json in istanza vue e accedere in html usando l'attributo v-repeat.

https://jsfiddle.net/kn9181/1yy84912/

prega può qualsiasi aiuto ???

Answer 1

Un semplice esempio.

views.py

def articles(request): 
    context { 
     'articles' : ['a1','a2','a3'] 
    } 
    return render(request, 'articles.html', context) 

articles.html

{% verbatim %} 
<div id="app"> 
    <ul> 
    <li v-for="a in articles">{{ a }}</li> 
    </ul> 
</div> 
{% endverbatim %} 

<script> 
    new Vue({ 
     el : "#app", 
     data : function(){ 
      return { 
       articles : {{ articles | safe }} 
      } 
     } 
    }) 
</script> 

cose da guardare fuori per:

• La verbatim tag per fermare Django dal rendering dei contenuti di questo tag di blocco poiché Vue usa gli stessi simboli di interpolazione.
• Il filtro safe impedisce a Django di sfuggire al contenuto.
• Se si passa un dizionario, considerano trasformandolo in JSON primo

In generale, preferiscono passare i dati al Vue tramite Ajax