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

Satoshi Oikawa
Jun 29, 2019 · 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>

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store