DjangoのテンプレートでVueのマスタッシュ表記が機能しない場合の対策

対象者

DjangoのhtmlテンプレートでVueを使ってみたいと思っている人

問題

DjangoのhtmlテンプレートでVueのマスタッシュ表記を使用しようとしたところ、バインディングがうまくいかないという問題が発生

原因

Djangoのhtmlテンプレートで使われるデリミタとVueのマスタッシュ表記で使用されるデリミタが同じであることが原因でした

・Djangoテンプレートのデリミタ

{{ message }}

・Vueのマスタッシュ表記

{{ option.name }}

その為、下記のようにマスタッシュ表記を使ってテンプレートを作成するとうまく機能しませんでした

<select v-model="selected" class="form-control">
            <option v-for="option in options" v-bind:value="option">
                {{ option.name }}
            </option>
</select>

対策

Vue側のマスタッシュ表記のデリミタを変更することで対応できました。

下記のdelimitersという行を追加することでデリミタを変更することができました。

new Vue({
    delimiters: ['[[', ']]'],  //追加
    el: '#app',
    data: {
        options: [
            { id: 1, name: "テスト1",value: "test1"},
            { id: 2, name: "テスト2", value: "test2"},
        ],
    }
})

上記の設定追加後、デリミタを[[ ]]に変更します。

<select v-model="selected" class="form-control">
            <option v-for="option in options" v-bind:value="option">
                [[ option.name ]]
            </option>
</select>