将Django数据传递到Vue组件

du7egjpx 于 2023-08-07 发布在 Vue.js

关注(0)|答案(2)|浏览(201)

我使用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)
  },
}

型
当我查看控制台时，它没有显示任何数据。它只是说undefined。

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.js

来源：https://stackoverflow.com/questions/60460443/pass-django-data-into-vue-component

2条答案

按热度按时间

gcuhipw91#

当你设置gridData并尝试将其绑定到Vue组件时，它无法工作，因为它们具有不同的上下文。当你处理Vue组件时，你只能访问Vue示例内部定义的数据。此外，{{json_data|safe}}容易受到XSS类型的攻击。
然而，将数据从Django安全地传递到Vue组件是非常容易的，我们只需要使用json_script过滤器并将数据加载到Vue的mounted钩子中。
在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>块，例如：

<script id="json_data" type="application/json">{"hello": "world"}</script>

型
最后，在myComponent.vue中，我们加载，JSON解码并设置mounted钩子中的数据：

export default {
  data() {
      return {
          tableData
      }
  },
  components: {
    Grid,
    ButtonModal
  },
  mounted() {
    this.tableData = JSON.parse(document.getElementById('json_data').textContent)
  },
}

型

赞(0）回复(0）举报 2023-08-07

8iwquhpp2#

我认为你可以直接将Django的服务器端props传递给使用它的子组件。我的设置是这样的：

{% extends "ExpenseTracker/layout.html" %}
{% load static %}

{% block content %}
<div id="transactionlabeling_view"
>
 <transactions-table 
 :cached_items = "{{transactions}}"
 :account_types = "{{account_types}}"
 ></transactions-table>
</div>
{% endblock content %}

字符串
其中有一个Vue组件安装在“#transactionlabeling_view”上。在那里，我导入了子组件transactions-table，我从Django视图中传递了服务器端的props（{{transactions}} & {{account_types}}）到transactions-table组件中的props（：cached_items &：account_types）：

props:{
    cached_items:null,
    account_types:null
},

型
这很方便，你不必解析这两个props，vue为你完成了这项工作。但是你确实需要在{{transactions}}和{{account_types}}上使用JSON.dump，然后将其作为上下文传递到html中。工作起来很有魅力，我使用vue 3.2.6和Django 4.1.6，并在Django中安装了vue。

赞(0）回复(0）举报 2023-08-07

我来回答

将Django数据传递到Vue组件

2条答案

相关问题

热门标签

最新问答