[Fixed]-How to solve double curly brackets issue when using Vue + Django template language?

by

17👍

✅

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 ]].

👤Miguel

11👍

Use the verbatim template tag. https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#verbatim

<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>
👤glenfant

0👍

In your base template, you can add this line:

 <script>Vue.config.delimiters = ['${', '}'];</script>

Then you will able to use %{...} for Vue, {{...}} for django.

👤hereischen

Leave a comment