Skip to content

Instantly share code, notes, and snippets.

@dvmn-tasks
Last active June 3, 2023 20:07
Show Gist options
  • Save dvmn-tasks/971fe60dd7b162ca37f8f1fbf6d268b1 to your computer and use it in GitHub Desktop.
Save dvmn-tasks/971fe60dd7b162ca37f8f1fbf6d268b1 to your computer and use it in GitHub Desktop.
Конфликт шаблонизаторов Django и Vue.js

Конфликт шаблонизаторов Django и Vue.js

Вёрстка в index.html проходит сразу через два шаблонизатора — сначала Django на сервере, затем Vue.js на фронтенде. И там и там для подстановки используются фигурные скобки {{…}}, что может привести к неожиданному, очень странному результату.

Как убедиться, что проблема в этом

Откройте index.html и найдите там код, который Django может принять за свои места для подстановки. Выглядеть должно так: {{…}} или {%…%}.

Как чинить

Избежать конфликта можно с помощью шаблонного тега verbatim. Воспользуйтесь тем фактом, что Vue.js влияет только на часть вёрстки — ту, что используется в качестве шаблона:

  el: '#sidebar-app',
  template: document.getElementById('app-template').innerHTML,
  ...
});

Если указан атрибут template, то Vue.js берёт шаблон из соответствующей строки. Метод document.getElementById ищет в DOM дереве элемен с указанным id, а innerHTML позволяет добраться до его содержимого.

el — это элемент, внутри которого Vue.js поместит результат рендера. Строка #sidebar-app — это селектор того элемента.

Если атрибут template не указан, то шаблон будет взят из элемена el.

Как проверить

Загрузить страницу в браузере и откройте её исходный код — View page source. Проверить вёрстку внутри тега '#sidebar-app', там должны остаться размеченные места с подстановкой {{…}}. Если их нет - значит вмешалась Django и всё сломала.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment