Flask传递字典数组至Jinja2时转为字符串，Vue接收类型不匹配报错

问题场景：
你的Flask路由传递包含字典的列表到模板，在Jinja2中遍历渲染Vue组件时，直接使用camera_info={{ camera }}会导致Vue接收到的是字符串而非预期的Object类型，触发类型检查错误：

[Vue warn]: Invalid prop: type check failed for prop "camera_info". Expected Object, got String with value "{'id':"

正确解决方案 #

核心是结合Vue的属性绑定语法和Jinja2的过滤器，确保传递的是可被Vue解析为Object的合法JSON：

1. 修改Jinja2模板代码为：

{% for camera in cameras %}
    <camera-viewer :camera_info="{{ camera|tojson|safe }}"></camera-viewer>
{% endfor %}

关键细节说明：

• :camera_info：Vue的v-bind语法缩写，告诉Vue该属性的值是一个JavaScript表达式，而非字符串字面量，这样Vue会尝试解析值为对应类型。
• |tojson：Jinja2内置过滤器，将Python字典转换为标准JSON格式字符串，确保符合JavaScript对象的语法要求。
• |safe：关闭Jinja2的自动HTML转义，避免JSON中的双引号被转义为"，保证Vue能正确解析JSON为Object。

为什么之前用tojson无效？ #

大概率是没配合Vue的v-bind语法，或是缺少safe过滤器：

• 若只用camera_info={{ camera|tojson }}，Vue会把整个JSON字符串当作属性值的字面量，接收到的还是String类型。
• 若没加safe，Jinja2会转义引号，导致JSON格式被破坏，Vue无法解析为有效对象。

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