【Vue.js】Flaskからテンプレートへ値を渡す方法

Pythonからコンポーネントのテンプレートへ値を渡す方法についてご紹介します。

PythonのwebフレームワークはFlaskを使っています。

以下のページのように、Flaskで作ったリストの値をテンプレートに表示するコードを書いていきたいと思います。

Pythonのリスト→JavaScriptでjson形式に変換→コンポーネントのテンプレートでディレクティブを使って表示する、流れとなります。

Pythonのリストは以下のように準備します。

@app.route("/vue")
def hello_vue():
    return render_template("vue.html",
                                title="Vue.jsにトライ",
                                message="これはvueのサンプルです。",
                                animal=['dog','cat','pig']
                           )

vue.htmlが表示されるときに、animalと言う名前のリストを渡すようにしています。

次に、コンポーネントのオブジェクトを作成します。

コンポーネントのオブジェクトを作るには、Vue.componentメソッドを使います。

ここに引数には、コンポーネント名、テンプレート名、テンプレートに与えるデータを指定します。

Pythonから受け取ったanimalリストをjson形式の配列に変換し、関数の返り値として返します。

var d = eval({{animal|tojson}})
Vue.component('fuga', {
    template: '#fuga-template',
    data:function(){ return {animal_list: d }; }
});

最後にテンプレートで配列の中身を順番に表示します。

配列の中身をすべて表示するために、v-forディレクティブを使っています。

<ul class="list-group">
    <li class="list-group-item list-group-item-warning h5">
        * animal list *
    </li>
    <li v-for="animal in animal_list" class="list-group-item">
        {{ animal }}
    </li>
</ul>

こんな感じ。

おわり!

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog