- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Django 作为后端,我正在尝试将一些数据传递到我制作的 Vue 表格组件中。我使用这个 tutorial 设置它该组件在使用 webpack 时显示正常。我正在尝试将数据设置为 javascript 常量,然后将其传递到组件中。数据似乎没有通过。这是我的脚本的布局方式。
index.html
{% 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 %}
myComponent.vue 脚本部分
export default {
name: 'table_component',
props: {
tableData: Array
},
data() {
return {
}
},
components: {
Grid,
ButtonModal
},
created(){
console.log(this.tableData)
},
}
当我查看控制台时,它没有显示任何数据。它只是说未定义。
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
如有任何帮助,我们将不胜感激。我不确定我哪里出错了
最佳答案
当您设置 gridData
时并尝试将它绑定(bind)到它不工作的 Vue 组件,因为它们具有不同的上下文。当你处理 Vue 组件时,你只能访问 Vue 实例中定义的数据。此外,{{json_data|safe}}
容易受到 XSS 类型的攻击。</p>
但是,将数据从 Django 安全地传递到 Vue 组件非常容易,我们只需要使用 json_script
在 Vue 的 mounted
中过滤并加载数据钩子(Hook)。
在views.py 中只需将列表传递给模板,无需使用json.dumps()
:
class CurrentClassroomView(LoginRequiredMixin, CreateView):
template_name = 'home/index.html'
def get(self, request, *args, **kwargs):
db_data = list(myData.objects.all().values())
return render(request, self.template_name, {'json_data':db_data})
在 index.html 中,我们将使用 json_script
用于创建 json_data
的 JSON 格式表示的模板标记变量:
{% block content %}
{{ json_data|json_script:"json_data" }}
<div id="app">
<table_component></table_component>
</div>
{% end block %}
这将创建一个 <script>
block ,例如:
<script id="json_data" type="application/json">{"hello": "world"}</script>
最后,在 myComponent.vue 中,我们加载、JSON 解码并在 mounted
中设置数据钩子(Hook):
export default {
data() {
return {
tableData
}
},
components: {
Grid,
ButtonModal
},
mounted() {
this.tableData = JSON.parse(document.getElementById('json_data').textContent)
},
}
关于javascript - 将 Django 数据传递给 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60460443/
我错过了什么,我已完成 的安装指南中要求的所有步骤 native 脚本 运行 tns doctor 给我以下输出... C:\abc\xyz>tns doctor √ Getting environm
尝试从 {addToCart(book)}}/>}> 传递数据至}> 问题: 购物车 ( render={()=> ) 收到 null,但没有收到我尝试发送的对象 已放置“console.log...
这是 _app.tsx 的外观: function MyApp({ Component, pageProps }: AppProps) { return } 我在构建项目时遇到了这个错误: Ty
我的 Laravel Vue 组件收到以下警告: [Vue warn]: Avoid mutating a prop directly since the value will be overwrit
根据这个example更详细this one我刚刚遇到了一件奇怪的事情...... 如果我使用方法作为 addTab(title,icon,component) 并且下一步想使用 setTabComp
目前我有一个捕获登录数据的表单,一个带有 TIWDBGrid 的表单,它应该返回与我从我的 mysql 数据库登录时创建的 user_id 关联的任何主机,以及一个共享数据模块。 下面是我的登录页面代
在我的react-native应用程序中,我目前有一个本地Android View (用java编写)正确渲染。当我尝试将我的react-native javascript 组件之一放入其中时,出现以
我为作业编写了简单的代码。我引用了文档和几个 youtube 视频教程系列。我的 react 代码是正确的我在运行代码时没有收到任何错误。但是这些 react-boostrap 元素没有渲染。此代码仅
几周前我刚刚开始使用 Flow,从一周前开始我就遇到了 Flow 错误,我不知道如何修复。 代码如下: // @flow import React, { Component } from "react
我想在同一个 View 中加载不同的 web2py 组件,但不是同时加载。我有 5 个 .load 文件,它们具有用于不同场景的表单字段,这些文件由 onchange 选择脚本动态调用。 web2py
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 6年前关闭。 Improve t
Blazor 有 InputNumber将输入限制为数字的组件。然而,这呈现了一个 firefox 不尊重(它允许任何文本)。 所以我尝试创建一个过滤输入的自定义组件: @inherits Inpu
我在学习 AngularDART 组件时编写了以下简单代码,但没有显示任何内容,任何人都可以帮助我知道我犯了什么错误: 我的 html 主文件:
我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后,div 不应消失。我正在尝试使用 CSSTransition 组件并查看 reactcommunity.org 上的示例,但我根本无
我需要一个 JSF 组件来表示甘特图。是否有任何组件库(如 RichFaces)包含这样的组件? 最佳答案 JFreeChart有甘特图和PrimeFaces有一个图像组件,允许您动态地流式传输内容。
从软件工程的角度来看,组件、模块和子系统之间有什么区别? 提前致谢! 最佳答案 以下是 UML 2.5 的一些发现: 组件:该子句指定一组结构,可用于定义任意大小和复杂性的软件系统。特别是,它将组件指
我有使用非托管程序集(名为 unmanaged.dll)的托管应用程序(名为 managed.exe)。到目前为止,我们已经创建了 Interop.unmanaged.dll,managed.exe
我有一个跨多个应用程序复制的 DAL(我知道它的设计很糟糕,但现在忽略它),我想做的是这个...... 创建一个将通过所有桌面应用程序访问的 WCF DAL 组件。任何人都可以分享他们对关注的想法吗?
我有一个 ComboBox 的集合声明如下。 val cmbAll = for (i /** action here **/ } 所有这些都放在一个 TabbedPane 中。我想这不是问题。那么我
使用 VB6 创建一个 VB 应用程序。应用程序的一部分显示内部的闪存。 当我使用 printform它只是打印整个应用程序。我不知道如何单独打印闪光部分。任何帮助,将不胜感激!.. 谢谢。 最佳答案
我是一名优秀的程序员,十分优秀!