Vue.jsとflaskを使うとマスタッシュが衝突する問題&解決法

vueとflaskでマスタッシュが衝突する記事のアイキャッチFlask

先日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>

コメント