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

Posted 2023-02-23

【中文标题】首次请求加载json数据并在首页显示

【英文标题】：Load json data for the first time request and to display the same in Home Page

【发布时间】：2016-07-06 23:40:14

【问题描述】：

我是第一次使用 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/

谁能帮忙？？？

【问题讨论】：

从 1.0+ 版本开始，v-repeat 已被删除，取而代之的是 v-for。所以这可能是问题

谢谢。我现在改为 v-，但我的问题是，如何将序列化数据 json 传递给 js

我不知道 python，但是在 php 中我们会做类似的事情，var json = " <?php echo $json_string;?>" 将 json 数据作为字符串从 php 传递给 js。和var obj = JSON.decode(json); 获取js对象。

没有解决我的问题。

看看***.com/questions/1445989/…一旦得到包含数据的js对象，就可以把数据传给Vue()

【参考方案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 使用相同的插值符号。 safe 过滤器可防止 Django 转义内容。 如果要传递字典，请考虑先将其转换为 JSON

一般来说，更喜欢通过Ajax向Vue传递数据