Nunjucksの変数出力(Variables)とvueとかののデータバインドどっちも使いたい時

03/10/2018

概要

Nunjucksの変数出力(Variables)とvueのデータバインドはともに
{{}}なので共存したい場合のとりあえずの方法。

Nunjucks/Vue.js

普段jqueryでいいじゃん派なのですが
最近案件でvue.js使う機会があり。
軽く使う程度であれば便利は便利なので個人的な案件でも使ってみてます。
あんまり深く使ってはいる訳では無いけどもAngular1(2は知らない)とかより手軽に使い始められそうな感じな印象です。
.vueファイルとでコンポーネントとかまで使うとしばらく後で見て何だっけコレ？現象がおこりそうな気がするので
個人的にはまだ本格的に使う気は無いです。

{{}}の展開

で本題ですがNunjucksは{{}}が変数展開,Vueは{{}}データバインドってそれぞれ言い方あってるかわかりませんが、
まぁ{{}}での出力がかぶってるのでそれを回避する方法。

Nunjucks側で先に展開されると思うので具体的に言うとNunjucksで{{}}をそのままhtmlに出力する方法ですかね。

//Nunjucks
{% set temp = '{{ val }}' %}
{{ temp }}

以上です。

webhtml, vue

Posted by admin