首次请求加载 json 条数据并在首页显示

Question

我是第一次使用 Vue.js。我需要序列化 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)

我尝试在 html 中显示序列化的 json 数据，它在那里工作正常，

现在，如何在 vue 实例中初始化 json 数据并使用 v-repeat 属性在 html 中访问。

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

请问有人能帮忙吗？？？

Answer 1

一个简单的例子。

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>

注意事项：

verbatim 标签阻止 Django 呈现此块标签的内容，因为 Vue 使用相同的插值符号。
防止 Django 转义内容的 safe 过滤器。
如果你传递的是字典，考虑先把它变成JSON

一般来说，更喜欢通过Ajax

向Vue传递数据

首次请求加载 json 条数据并在首页显示

Load json data for the first time request and to display the same in Home Page

javascript

python

django

vue.js