Javascript 将Django数据传递到Vue组件
我使用Django作为后端,并尝试将一些数据传递到我制作的Vue表组件中。我用这个来设置它,组件在使用网页包时显示良好。我试图将数据设置为javascript常量,然后将其传递到组件中。数据似乎没有通过。下面是我的脚本的布局 index.htmlJavascript 将Django数据传递到Vue组件,javascript,django,vue.js,vuejs2,vue-component,Javascript,Django,Vue.js,Vuejs2,Vue Component,我使用Django作为后端,并尝试将一些数据传递到我制作的Vue表组件中。我用这个来设置它,组件在使用网页包时显示良好。我试图将数据设置为javascript常量,然后将其传递到组件中。数据似乎没有通过。下面是我的脚本的布局 index.html {% block content %} <script> const gridData = {{json_data|safe}}; console.log(gridData) </script> <div
{% block content %}
<script>
const gridData = {{json_data|safe}};
console.log(gridData)
</script>
<div id="app">
<table_component
v-bind:tableData=this.gridData
>
</table_component>
</div>
{% end block %}
当我查看控制台时,它没有显示任何数据。它只是说未定义
view.py
class CurrentClassroomView(LoginRequiredMixin, CreateView):
template_name = 'home/index.html'
def get(self, request, *args, **kwargs):
db_data = list(myData.objects.all().values())
my_json_data = json.dumps(db_data)
return render(request, self.template_name, {'json_data':my_json_data})
我在控制台中得到了这一点,我不知道这意味着什么,为什么它使所有内容都变为小写,即使我用大写字母传递它
[Vue tip]: Prop "griddata" is passed to component <Anonymous>, but the declared prop name is "gridData". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "grid-data" instead of "GridData".
tip @ vue.js:639
extractPropsFromVNodeData @ vue.js:2294
createComponent @ vue.js:3233
_createElement @ vue.js:3427
createElement @ vue.js:3359
vm._c @ vue.js:3496
eval @ VM1553:3
Vue._render @ vue.js:3550
updateComponent @ vue.js:4066
get @ vue.js:4477
Watcher @ vue.js:4466
mountComponent @ vue.js:4073
Vue.$mount @ vue.js:9043
Vue.$mount @ vue.js:11943
Vue._init @ vue.js:5011
Vue @ vue.js:5077
eval @ index.js:14
./assets/js/index.js @ app.js:409
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
[Vue提示]:道具“griddata”传递给组件,但声明的道具名称为“griddata”。请注意,HTML属性不区分大小写,camelCased props在DOM模板中使用时需要使用其kebab大小写等价物。您可能应该使用“网格数据”而不是“网格数据”。
tip@vue.js:639
extractPropsFromVNodeData@vue.js:2294
createComponent@vue.js:3233
_createElement@vue.js:3427
createElement@vue.js:3359
vm._c@vue.js:3496
VM1553:3时的评估
Vue._render@Vue.js:3550
updateComponent@vue.js:4066
获取@vue.js:4477
Watcher@vue.js:4466
mountComponent@vue.js:4073
Vue.$mount@Vue.js:9043
Vue.$mount@Vue.js:11943
Vue._init@Vue.js:5011
Vue@Vue.js:5077
eval@index.js:14
/assets/js/index.js@app.js:409
__webpack_require__@app.js:20
(匿名)@app.js:84
(匿名)@app.js:87
在此方面的任何帮助都将不胜感激。当您设置
gridData
并尝试将其绑定到Vue组件时,我不确定哪里出了问题,因为它们具有不同的上下文,所以无法工作。处理Vue组件时,只能访问Vue实例中定义的数据。此外,{{json|u data | safe}}
容易受到XSS类型的攻击
但是,将数据从Django安全地传递到Vue组件非常容易,我们只需使用过滤器并将数据加载到Vue的挂载的钩子中即可
在views.py中,只需将列表传递给模板,无需使用json.dumps()
:
在index.html中,我们将使用json_脚本
模板标记创建json_数据
变量的json格式表示:
{% block content %}
{{ json_data|json_script:"json_data" }}
<div id="app">
<table_component></table_component>
</div>
{% end block %}
设置gridData
并尝试将其绑定到Vue组件时,该组件不起作用,因为它们具有不同的上下文。处理Vue组件时,只能访问Vue实例中定义的数据。此外,{{json|u data | safe}}
容易受到XSS类型的攻击
但是,将数据从Django安全地传递到Vue组件非常容易,我们只需使用过滤器并将数据加载到Vue的挂载的钩子中即可
在views.py中,只需将列表传递给模板,无需使用json.dumps()
:
在index.html中,我们将使用json_脚本
模板标记创建json_数据
变量的json格式表示:
{% block content %}
{{ json_data|json_script:"json_data" }}
<div id="app">
<table_component></table_component>
</div>
{% end block %}
我还使用Django作为后端,vuejs作为前端。我的建议如下:使用API并从vuejs查询它。您可以使用graphene django(django的graphql实现)与apollo一起构建一个API,以查询graphql端点(我实际上就是这么做的)或DRF(django Rest框架)。否则,我不知道如何直接将数据从django传递到vuejs。我还使用django作为后端,vuejs作为前端。我的建议如下:使用API并从vuejs查询它。您可以使用graphene django(django的graphql实现)与apollo一起构建一个API,以查询graphql端点(我实际上就是这么做的)或DRF(django Rest框架)。否则,我不知道如何直接将数据从django传递到vuejs。
{% block content %}
{{ json_data|json_script:"json_data" }}
<div id="app">
<table_component></table_component>
</div>
{% end block %}
<script id="json_data" type="application/json">{"hello": "world"}</script>
export default {
data() {
return {
tableData
}
},
components: {
Grid,
ButtonModal
},
mounted() {
this.tableData = JSON.parse(document.getElementById('json_data').textContent)
},
}