Django template と Vue.js を使う場合の注意点

Satoshi Oikawa
Jun 29 · 2 min read

htmlテンプレートエンジンに Django templete を使い,JavaScript 部分を Vue.js で実装しようとして,Vue.js 側のバインディングが全く動かないというトラブルに会いました。

結論から行くと,原因は Django と Vue.js のデリミタが同じだったことです。Django template のデリミタは {{ foo }}で,Vue.js のデリミタも {{ var }}でした。

Vue.js 側のデリミタを [[ var ]]に変更することで解決できました。

問題があるコード

<div class="title">{{ Django 側でバインドした値が出力される }}</div>
<ul class="list">
<li v-for="item in items">
<!-- Vue.js で出力されない -->
{{ item.message }}
</li>
</ul>

解決済みのコード

new Vue({
delimiters: ['[[', ']]'], // ここが肝
data: {
items: []
}
});
<div class="title">{{ Django 側でバインドした値が出力される }}</div>
<ul class="list">
<li v-for="item in items">
<!-- Vue.js で出力される -->
[[ item.message ]]
</li>
</ul>
Satoshi Oikawa

Written by

Product and Engineering guy.