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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じ。

おわり!