Как передать переменную Django в Vue prop

Question

Я пытаюсь передать логическую переменную шаблона 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 показывает «undefined».

Я знаю, что {{client.show_price}} установлен, потому что, если я его распечатаю, он появляется на странице, и если я укажу true вместо {{client.show_price}}, ошибок не будет.

Таким образом, я думаю, что Ву не понимает, что это за выражение? Может быть, это противоречит языку шаблонов Django? Любая помощь с благодарностью!

edit: я добавил разделители: ["<%", "%>"] к компоненту vue, и проблема все еще сохраняется.

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

Я думаю, когда археологи найдут мой код, они напишут песни о том, как это красиво.