Tải dữ liệu json cho lần đầu tiên yêu cầu và hiển thị giống nhau trong Trang chủ

Question

Tôi đang sử dụng Vue.js lần đầu tiên. Tôi cần phải serialize các đối tượng của 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) 

Tôi đã cố gắng để hiển thị dữ liệu json serialized trong html làm việc của nó tốt ở đó,

Bây giờ, làm thế nào để intialize dữ liệu json trong trường hợp vue và truy cập vào html bằng cách sử dụng thuộc tính v-repeat.

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

Bạn có thể giúp gì không ???

Answer 1

Ví dụ đơn giản.

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> 

Những điều cần xem ra cho:

• Các verbatim thẻ để ngăn chặn Django từ render nội dung của thẻ chặn này vì Vue sử dụng cùng một biểu tượng nội suy.
• Bộ lọc safe để ngăn Django thoát khỏi nội dung.
• Nếu bạn đang đi qua một cuốn từ điển, hãy xem xét biến nó thành JSON đầu tiên

Nói chung, thích thông qua dữ liệu để Vue qua Ajax