将 Django 数据传递给 Vue 组件答案

【问题标题】：Pass Django Data into Vue component将 Django 数据传递给 Vue 组件
【发布时间】：2020-06-13 01:44:27
【问题描述】：

我使用 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

对此的任何帮助将不胜感激。我不确定我哪里出错了

【问题讨论】：

我也使用 Django 作为后端，使用 vuejs 作为前端。我的建议如下：使用 API 并从 vuejs 查询。您可以使用 graphene-django（django 的 graphql 实现）与 apollo 一起构建一个 API，以查询 graphql 端点（这就是我实际上正在做的）或 DRF（Django Rest 框架）。否则我不知道如何直接将数据从 django 传递给 vuejs。

标签： javascript django vue.js vuejs2 vue-component

【解决方案1】：

当您设置 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 中，我们在 mounted 挂钩中加载、JSON 解码和设置数据：

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

【讨论】：