lig*_*ray 4 python django templates json vue.js
我是 Vue.js 的新手。如何将 JSON 数据从 Django 视图传递到 vue 实例（方法）。
视图.py
def articles(request):
model = News.objects.all() # getting News objects list
random_generator = random.randint(1, News.objects.count())
context = {
'title' : 'Articles' ,
'modelSerialize' : serializers.serialize('json',News.objects.all()),
'num_of_objects' : News.objects.count() ,
}
return render(request, 'articles.html',context)
VueScript.js
new Vue({
el: '#list-Of-Articles-Displayed',
data: {
count: 0
},
ready: function() {
this.$http.get('http://127.0.0.1:8000/article/').then(function (response) {
response.status;
console.log(response);
}, function (response) {
alert("error ");
// error callback
});
}
})
模板（文章.html）
<div id = "list-Of-Articles-Displayed" class = "col-lg-10" v-for="news in loadArticles" >
<div class = "col-lg-11">
<br>
<a href = "<%news.id%>" ><%news.title%></a>
<h5><small><%news.date%></small></h5>
<p>
<%news.body%>...<span style = "color : purple" > <a href = "<%news.id%>"> Call to Action</a>
<br><br></span>
</p>
</div>
我正在尝试访问 VueScript.js 中的 JSON 数据，而不是 JSON 数据，我获得了完整的 HTML 结构。
谁能帮我。？谢谢
也许是这样的：
视图.py
context = {'page_data' : json.dumps({"title": "Articles"})}
文章.html
<body data="{{ page_data }}">
在 vue 实例中
beforeMount(){
this.page = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data') || '{}');
}
也许你应该使用 aJsonResponse来代替：
from django.http import JsonResponse
def articles(request):
model = News.objects.all() # getting News objects list
random_generator = random.randint(1, News.objects.count())
context = {
'title' : 'Articles' ,
'modelSerialize' : serializers.serialize('json',News.objects.all()),
'num_of_objects' : News.objects.count() ,
}
return JsonResponse(context)
您遇到的问题是 render 返回一个内容类型为 的响应text/html，而 ajax 调用需要的是一个内容类型为 的响应application/json。这JsonResponse是确保您拥有正确的响应内容类型的快速方法。您可以在此处阅读有关 JsonResponse 的更多信息或阅读此 StackOverflow答案
| 归档时间： |
|
| 查看次数： |
7434 次 |
| 最近记录： |