先日flaskとVue.jsを使って開発をしていたらflaskとVue.jsのマスタッシュが衝突してしまい6時間くらいハマってしまったので解決方法を残しておきます
flaskを使っていてVue.jsが反応しなければ試してみる価値があると思います。
Vue.jsとflaskのマスタッシュが衝突する
Vue.jsとflaskはこんな感じで書いていきますが、よく見てみるとVue.jsとflaskの両方でマスタッシュ構文が使われています。
これが衝突してしまい、Vue.jsのマスタッシュ構文が機能しなくなります
マスタッシュ構文 → {{ }}
Vue.jsのexample
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Vue.js"
}
})
</script>
flask(jinja2)のexample
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
・
・
・
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
title = "index page"
return render_template('index.html', title=title)
if __name__ == '__main__':
app.run(debug=True, port=8888, threaded=True)
解決方法:delimiters
Vue.js側でdelimitersを変更することで解決することができます。
delimitersとは区切り文字のことです。
{{ }}ではなくて今回は[[ ]]を使っていきますが、任意で指定できます。
<div id="app">
<p>[[ message ]]</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"vue.js"
},
delimiters:['[[',']]']
});
</script>
グローバル的にdelimitersを変更する
一々delimitersを設定するのも面倒ですので、グローバル的にdelimitersを変更しておきましょう。
Vue.options.delimiters = ['[[', ']]'];
でグローバル的に変更することができます。
<div id="app">
<p>[[ message ]]</p>
</div>
<div id="app2">
<p>[[ message2 ]]</p>
</div>
<script>
Vue.options.delimiters = ['[[', ']]'];
var app = new Vue({
el:"#app",
data:{
message:"vue1"
}
});
var app2 = new Vue({
el:"#app2",
data:{
message2:"vue2"
}
});
</script>
コメント