Vue.jsが反映されない

初めに

DjangoとVue.jsを使用してアプリ開発をしていてハマってしまった点がありました。

全然気が付けなく、2,3日奮闘してやっと今日気が付いたので、忘れないように書いておきます。

エラー

エラーとしては、Djangoのテンプレート言語を使用してVue.jsを<script>タグで記述していました。

二つのページそれぞれで中身が全く同じVueを定義していたのですが、片方のページではしっかりと動き、もう一方ではリアクティブに動いてくれませんでした。

Djangoのテンプレート言語を用いて、base.htmlからCDNの部分一部引っ張ってくる方法をしていました。

試行錯誤

まず初めにエラーの原因として考えたのは、同じCDNを複数回呼んでしまっている事でした。

次に考えた原因は、vue.jsの書き方idの不一致やv-modelの値の不一致などを考えました。

次に考えた原因は、二つのHTMLファイルで同じ名前の関数を定義している（el, id は異なる）ことがダメなのではないのかという事。

しかし、以上のどれも解決できませんでした。

console.logなどで確認してみたところ、初めの一回目はしっかりとVueが作用しているようでした。

そのため、Vueの書き方が間違っているという事もなさそうでよりわからなくなりました。

原因

Vueがちゃんと動いているページと細かく見比べたときに、やっと原因が分かりました。

        {% block content %}
        -----
        {% block cdn %}
        --
        {% endblock cdn %}
        {% block script %}
        --
        {% endblock script %}
        
        {% endblock %}
    

と{% endblock %}の位置がおかしい事が原因でした。 いろいろ書き足していくうちにごちゃまぜにしてしまっていました。

以下のように書き換えると嘘みたいにちゃんと動くようになったので、良かったです。

        {% block content %}
        -----
        {% endblock content %}
        {% block cdn %}
        --
        {% endblock cdn %}
        {% block script %}
        --
        {% endblock script %}