vue.js jinja2.exceptions.UndefinedError:未定义'asset'

wydwbb8l  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(215)

我正在通过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",

                    } ......

谁能帮帮我吗?
谢谢你,谢谢你

juud5qan

juud5qan1#

假设您的asset_data列表是有效的JSON,you most likely need to redefine the delimiters used in 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分隔符的方法是将Jinja {% raw %}标记包裹在Vue变量周围:

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

这会告诉Jinja忽略模板的某些部分。
希望这个有用。

相关问题