how to use Vue.js interpolation in a Jango template?

Asked

Viewed 269 times

2

Django uses a template syntax tool, called jinja2, which allows interpolation in the html document using double keys. Unfortunately, Vue.js uses interpolation in the same way.

<p id="exemplo"> {{ message }}  </p>

<script>
  new Vue({
    el: '#exemplo',
    data: { message: 'mensagem que deveria aparecer no paragrafo' }
  })
</script>

Under normal conditions, only this would be necessary for operation. However, Django recognizes it as its own interpolation, not displaying any content.

javascript python django vue.js
  • 1

    Curiosity: need to serve a Vue template with Django himself? Why?

  • I think the best answer would be for fun. I usually use a Node-based stack, and it’s not something that gets me very excited about programming, so I always look for new technologies to use in my spare time. Python became my favorite language, and I really loved the experience I had with Python.

1 answer

5

In the Vue configuration you have the option to define new delimiters for your template, so you can report something that doesn’t conflict with Django’s templates system.

const app = new Vue({
  delimiters: ['[[', ']]'],
  // ...
});

So instead of using {{ message }} just use [[ message ]].

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: {
    message: 'Hello World'
  },
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">[[ message ]]</div>

Browser other questions tagged javascript python django vue.js

You are not signed in. Login or sign up in order to post.