
В приложениях VueJS используется {{ varname }} для обработки шаблонов. В Jinja2 и Django шаблонах при рендеринге шаблона также используются фигурные скобки. Из-за этого возникает конфликт. Есть 3 способа решения проблемы.
VueJS — заменить фигурные скобки на что то другое
<!-- js файл --> new Vue({ delimiters: ['{*', '*}'], data: { VueVAR: 'test' } })
<!-- html файл --> <div id="app"> {* VueVAR *} <!-- vuejs --> {{ name }} <!-- переменная в Jinja2 или Django шаблоне переданная из views.py --> </dev>
Использовать RAW в html для Jinja2
<!-- js файл --> new Vue({ data: { VueVAR: 'test' } })
<!-- html файл --> <div id="app"> {{ VueVAR }} <!-- vuejs --> {% raw %} {{ name }} <!-- переменная в Jinja2 из views.py --> {% raw %} </dev>
Для Django templates поменять фигурные скобки
# в файле setting.py VARIABLE_TAG_START = '{*' VARIABLE_TAG_END = '*}'
<!-- js файл --> new Vue({ data: { VueVAR: 'test' } })
<!-- html файл --> <div id="app"> {{ VueVAR }} <!-- vuejs --> {* name *} <!-- переменная в Django template из views.py --> </dev>
В своих проектах я всегда использую первый способ.