bottleのtemplate機能でvue.jsを使うにはどうしたらいいか

Question

bottleを使ってローカルサーバーのアプリを作っています。これまでtemplate機能を使い、そこにpython側で作成したHTMLを渡していました。
ただ、規模が大きくなってきたため、Vue.jsを導入しようと考えました。

それでtemplateのほうにvuejsを埋め込んでみようとしたのですが、エラーが出て困っています。

たとえば以下のような書き方をすると、

<td>{{data1}}</td>

data1が定義されていないというpython側のエラーが出てしまいます。

おそらく
{{}}
の記号がtemplateとvueでかぶっているからそうなるのだと思います。

これはどのようにしたら解消できるのでしょうか。

ご指導お願いいたします。

Answer 1

Vue側のinterpolation delimiterを変えればいいと思います。

delimiters - Vue.js API

---

ちなみにbottleの側を変更することはできるのでしょうか。

docsを見てもそれに関する情報は書いてないですが、ソースコードを見るとできそうです。
SimpleTemplateのコンストラクタにsyntaxという引数を渡せばいいです。
デフォルトでは

default_syntax = '<% %> % {{ }}'

がセットされますが、これを'<% %> % [[ ]]'に変えるとできるみたいです。

import bottle

tpl = bottle.SimpleTemplate("x = [[x]]", syntax="<% %> % [[ ]]")
tpl.render(x=3.14)
# 'x = 3.14'

参考
Changing template tags in Bottle.py SimpleTemplate

Comments

[退会済みユーザー]

ありがとうございます！
ちなみにbottleの側を変更することはできるのでしょうか。

[karamarimo]

追記しました。

[退会済みユーザー]

ありがとうございます！ チャレンジしてみます。

[karamarimo]

デフォルトのエラーページが {{ }} を使ってハードコードされているのでそれも変えないといけないですね。
bottle..ERROR_PAGE_TEMPLATE = ...
で上書きすればいいと思います。