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

Posted 2023-02-23

【中文标题】如何将 Django 变量传递给 Vue 道具

【英文标题】：How to pass Django variable to Vue prop

【发布时间】：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 组件中添加了分隔符：[""]，但问题仍然存在。

【参考方案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 %

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