我正在通过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",
} ......
谁能帮帮我吗?
谢谢你,谢谢你
1条答案
按热度按时间juud5qan1#
假设您的
asset_data
列表是有效的JSON,you most likely need to redefine the delimiters used in Vue:然后在Vue HTML中,您可以使用
[[ ]]
分隔符:如您所知,Jinja和Vue默认使用相同的双花括号分隔符(
{{ }}
),因此,Jinja将Vue变量({{ asset.name }}
)解释为Jinja变量。另一种不用重新定义Vue分隔符的方法是将Jinja
{% raw %}
标记包裹在Vue变量周围:这会告诉Jinja忽略模板的某些部分。
希望这个有用。