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>