Flask传数据至Vue遇jinja2未定义错误：'asset'未定义

问题原因 #

你的代码存在模板引擎语法冲突：Flask默认使用Jinja2模板，它和Vue.js都用{{ }}作为插值标记。Jinja2解析HTML时，会把Vue的{{ asset.name }}当成自身模板变量处理，但此时Jinja2上下文里并没有asset变量，因此抛出UndefinedError。

解决方案 #

方案1：修改Vue的插值分隔符 #

让Vue使用与Jinja2不同的插值符号，彻底避免冲突：

<script>
const app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'], // 替换Vue默认插值符
    data: {
        assets: {{ asset_data|tojson }} // 用tojson过滤器确保数据转成合法JSON
    }
});
</script>

对应HTML遍历部分同步更新分隔符：

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

方案2：保留Vue默认分隔符，转义Jinja2解析 #

用Jinja2的raw标签包裹Vue模板代码，让Jinja2跳过这部分内容的解析：

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

同时确保Flask传递的数据正确转成JSON格式：

<script>
const app = new Vue({
    el: "#app",
    data: {
        assets: {{ asset_data|tojson }}
    }
});
</script>

额外注意事项 #

• 必须使用tojson过滤器处理asset_data，否则数据中的引号、换行等特殊字符会导致JS语法错误。
• 检查get_assets()返回的列表格式，确保字典末尾没有多余逗号（示例中的字典存在冗余逗号，转JSON时会引发错误）。

内容的提问来源于stack exchange，提问作者starlife