İlk kez istek için json verilerini yükleyin ve aynı sayfayı Ana Sayfa'da gösterme

Question

Vue.js'yi ilk defa kullanıyorum.

ben onun ince orada çalışan html tefrika json verilerini görüntülemek için çalıştık

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) 

views.py,

Şimdi, nasıl başlatılamadığı için ben django nesneleri serialize gerekiyor vson örneğinde json verileri ve v-yineleme özniteliğini kullanarak html'ye erişme.

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

Lütfen

herhangi bir yardım ???

Answer 1

Basit bir örnek.

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> 

dikkat edilmesi gereken

şeyler: içeriklerini render dan Django durdurmak için

• verbatim etiketi bu blok etiketinin Vue aynı enterpolasyon sembollerini kullandığı için.
• Django'nun içeriğinden kaçmasını önlemek için safe filtresi. Eğer bir sözlük geçiyoruz
• ,

Genel anlamda ilk JSON dönüştürerek düşünün, sürüm 1.0 + dan Ajax