jinja2.exceptions.undefined错误： 'asset' is undefined

Question

我通过我的Python后端获取API数据，然后通过Flask渲染到我的Vue.js前端。然而，我在标题中得到错误。

我已经检查并打印了我试图传递的变量，它打印了列表的内容。

这是我从Python中渲染变量的方式:

def index():
# Get the assets data
assets = get_assets()

# Return the template with the assets data
return render_template("index.html", asset_data=assets)

这就是我如何在我的HTML文件中设置它。首先，我使用v-for:

遍历列表

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

我有这个JS脚本:

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

我的列表是这样的:

{
"name": "Asset 1",
"symbol": "A1",
},
{
"name": "Asset 2",
"symbol": "A2",
},
{
"name": "Asset 3",
"symbol": "A2",
} ......

有人能帮我一下吗?

谢谢!

Answer 1

假设您的asset_data列表是有效的JSON，您很可能需要重新定义Vue中使用的分隔符:

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

然后在Vue HTML中，你可以使用[[ ]]分隔符:

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

如您所知，Jinja和Vue默认使用相同的双花括号分隔符({{ }})，因此，Jinja将您的Vue变量({{ asset.name }})解释为Jinja变量。

不需要重新定义Vue分隔符的另一种方法是，在Vue变量周围包装Jinja{% raw %}标记:

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

告诉Jinja忽略模板的部分。

希望对你有帮助。