[Vuejs]-Jinja2.exceptions.UndefinedError: 'asset' is undefined

by

0👍

✅

Assuming that your asset_data list is valid JSON, you most likely need to redefine the delimiters used in Vue:

const app = new Vue({
    el: '#app',
    data: {
        assets: {{ asset_data }},
    },
    delimiters: ['[[',']]']
});

And then in your Vue HTML, you can use this [[ ]] delimiter:

<tr v-for="asset in assets">
    <td>[[ asset.name ]]</td>
    <td>[[ asset.symbol ]]</td>
</tr>

As you know, Jinja and Vue use the same double curly brace delimiter by default ({{ }}), and as a consequence, Jinja was interpreting your Vue variable ({{ asset.name }}) as a Jinja variable.

Another alternative without redefining the Vue delimiters, is to just wrap the Jinja {% raw %} tag around your Vue variables:

<tr v-for="asset in assets">
    <td>{% raw %}{{ asset.name }}{% endraw %}</td>
    <td>{% raw %}{{ asset.symbol }}{% endraw %}</td>
</tr>

This tells Jinja to ignore parts of your template.

Hope this helps.

Leave a comment