加载第一次请求的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由于Vue使用相同的插值符号,因此标记可以阻止Django呈现此块标记的内容.
• safe防止Django转义内容的过滤器.
• 如果要传递字典,请考虑先将其转换为JSON

一般来说,更喜欢通过Ajax将数据传递给Vue