How to pass Django variable to Vue prop

Question

I'm trying to pass a Django template boolean variable to a Vue component.

At the component I added the variable to the props and specified the type:

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

Creating the component:

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

My first attempt was to not bind it but just pass along the value of client.show_price. The value of the_boolean_variable was set to the string "True" or "False" and Vue complained that it received a string rather than a boolean.

Duckduckgo told me that I need to bind non-string values, so I did but now I have the following error: "Property or method "True" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.". Inspecting the value of the_boolean_variable shows 'undefined'.

I know that {{ client.show_price }} is set because if I print it, it shows up on the page, and if I put true rather than {{ client.show_price }} there are no errors.

Thus I think that Vue is confused what kind of expression it is? Maybe it clashes with the Django template language? Any help is greatly appreciated!

edit: I've added delimiters: ["<%","%>"], to the vue component and the problem still persists.

ArmoredSandwich ArmoredSandwich · Accepted Answer · 2019-06-05T13:28:48

Oh.. I found this ugly work around ..

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

I think when archeologists find my code they will write songs about how beautiful it is.

How to pass Django variable to Vue prop

1 Answers