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: ['[', ']']
})

2018年3月26日月曜日