How To Solve Double Curly Brackets Issue When Using Vue + Django Template Language?
I am using Django template language and would like to use Vue on my project. One main problem I encountered is {{...}} syntax. My Vue data is not rendered at all.
Solution 1:
What glenfant said is easy, but this is even easier.
var app = new Vue({
delimiters: ['{', '}'],
el: '#app',
data: { message: 'Hello Vue!' },
})
That’s all: you configure Vue with the tag it should use to work. :) I use just one brace – {…} – but you can use doubled square brackets, too: [[ and ]].
Solution 2:
Use the verbatim template tag. https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#verbatim
<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>
Solution 3:
In your base template, you can add this line:
<script>Vue.config.delimiters = ['${', '}'];</script>Then you will able to use %{...} for Vue, {{...}} for django.
Post a Comment for "How To Solve Double Curly Brackets Issue When Using Vue + Django Template Language?"