如何将 Django 变量传递给 Vue 道具答案

【问题标题】：How to pass Django variable to Vue prop如何将 Django 变量传递给 Vue 道具
【发布时间】：2019-10-20 01:38:14
【问题描述】：

我正在尝试将 Django 模板布尔变量传递给 Vue 组件。

在组件中我将变量添加到道具并指定类型：

Vue.component('my-component', {
props: {
        id: {type: Number, required: true},
        static_url: {type: String, required: true},
        the_boolean_variable: {type: Boolean, required: true},
    },

创建组件：

<my-component v-bind:id={{ job.pk }}
              static_url="{{STATIC_URL}}"
              v-bind:the_boolean_variable={{ client.show_price }}>
</my-component>

我的第一次尝试是不绑定它，而只是传递 client.show_price 的值。 the_boolean_variable 的值设置为字符串“True”或“False”，Vue 抱怨它收到的是字符串而不是布尔值。

Duckduckgo 告诉我需要绑定非字符串值，所以我做了，但现在出现以下错误：“属性或方法“True”未在实例上定义，但在渲染期间引用。确保此属性是响应式的，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties."。检查 the_boolean_variable 的值显示“未定义”。

我知道 {{ client.show_price }} 已设置，因为如果我打印它，它会显示在页面上，如果我输入 true 而不是 {{ client.show_price }} 则没有错误。

所以我觉得 Vue 搞糊涂了是个什么样的表达方式？也许它与 Django 模板语言冲突？非常感谢任何帮助！

编辑：我在 vue 组件中添加了分隔符：[""]，但问题仍然存在。

【问题讨论】：

标签： javascript python django vue.js

【解决方案1】：

哦..我发现这个丑陋的工作..

{% if client.show_price %}
<my-component v-bind:id={{ job.pk }}
              static_url="{{STATIC_URL}}"
              v-bind:the_boolean_variable=true>
</my-component>
{% else %}
<my-component v-bind:id={{ job.pk }}
              static_url="{{STATIC_URL}}"
              v-bind:the_boolean_variable=false>
</my-component>
{% endif %}

我认为当考古学家找到我的代码时，他们会写歌来赞美它的美丽。

【讨论】：