Javascript 如何将Django变量传递给Vue prop

我试图将Django模板布尔变量传递给Vue组件

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

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\u price的值。_boolean_变量的值被设置为字符串“True”或“False”，Vue抱怨它收到的是字符串而不是布尔值

Duckduckgo告诉我需要绑定非字符串值，所以我确实绑定了，但现在我遇到了以下错误：“属性或方法“True”未在实例上定义，而是在呈现过程中引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：”。检查_boolean_变量的值显示“未定义”

我知道{{client.show_price}}是设置的，因为如果我打印它，它会显示在页面上，如果我将其设置为true而不是{{client.show_price}，则不会出现错误

因此，我认为Vue很困惑它是什么样的表达？也许它与Django模板语言冲突？非常感谢您的帮助

---

编辑：我已将分隔符：[“”]添加到vue组件，但问题仍然存在

哦。。我在附近发现了这件难看的作品

{% 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 %}

{%if client.show_price%}
{%else%}
{%endif%}

我想当考古学家找到我的密码时，他们会写一些关于它有多美的歌曲