GOとVueのtemplate構文がぶつかる(unexpected "{" in command)

angularJSともぶつかってしまうらしい。

---

現象

---

index.tmpl

<div id="app" >
    {{ value }}
</div>

index.js

new Vue({
    el: "#app",
    data() {
      return {
        value: "test",

      }
    },
    methods: {
    }
})

上記コードをサーバサイドgoで実装するとエラーになってしまう。

bad runtime process port ['']

panic: template: index.tmpl:44: unexpected "{" in command

goroutine 1 [running]:
panic(0x8e5260, 0xc082145220)
C:/Users/sins/AppData/Local/Google/Cloud SDK/google-cloud-sdk.staging/platform/google_appengine/goroot/src/runtime/panic.go:481 +0x3f4
html/template.Must(0x0, 0x3270028, 0xc082145220, 0x0)
C:/Users/sins/AppData/Local/Google/Cloud SDK/google-cloud-sdk.staging/platform/google_appengine/goroot/src/html/template/template.go:340 +0x52
main77383.init()
hello.go:59 +0xf7
main.init()
_go_main.go:14 +0x47

原因はgoのtemplate構文{{}}がVueとぶつかってしまっているため。

---

対策1:エスケープする

---

<div id="app" >
    {{`{{ value }}`}}
</div>

Vueで展開される部分を文字列にすることでブラウザに表示される段階で{{ value }}になる。
なかなか辛い

---

対策2:Go側の区切り文字を変更する

---

goの区切り文字は変更することができるらしい。

var indexTmpl, err = template.New("index.tmpl").Delims("[[", "]]").ParseFiles("index.tmpl")

これで想定どおりに読み込まれるようにする。

---

対策3:Vue側の区切り文字を変更する

---

Vueの区切り文字を変更することもできる。
https://vuejs.org/v2/api/#delimiters

new Vue({
  delimiters: ['[', ']']
})