javascript - Making Django & Vue.js work together with {% verbatim %} - Stack Overflow

admin管理员组

文章数量:1287776

I'm trying to make django & Vue work together even though they share the same {{ X }} template syntax.

I know that from django 1.5 we can use the {% verbatim %} tag. So I thought I could use django templates as usual and in the section where I need VUE to take over I would just use the {% verbatim %} tag. However instead of loading my vue data django loads the {{ variable }}.

For example my django code looks something like this:

{% verbatim %}

<div id='sessions'>
  <h2>{{message}}</h2>
</div>

{% endverbatim %} 

And in my app.js file I have:

var sessions = new Vue({
  el: '#sessions',
  data: {
    message: 'Hello Vue!'
  }
})

But instead of rendering Hello Vue! it renders {{message}}

The console doesn't show any error and vue loads correctly otherwise.

How I can make the two work together? Ideally without the need to change the vue.js {{}} syntax.

I'm trying to make django & Vue work together even though they share the same {{ X }} template syntax.

I know that from django 1.5 we can use the {% verbatim %} tag. So I thought I could use django templates as usual and in the section where I need VUE to take over I would just use the {% verbatim %} tag. However instead of loading my vue data django loads the {{ variable }}.

For example my django code looks something like this:

{% verbatim %}

<div id='sessions'>
  <h2>{{message}}</h2>
</div>

{% endverbatim %} 

And in my app.js file I have:

var sessions = new Vue({
  el: '#sessions',
  data: {
    message: 'Hello Vue!'
  }
})

But instead of rendering Hello Vue! it renders {{message}}

The console doesn't show any error and vue loads correctly otherwise.

How I can make the two work together? Ideally without the need to change the vue.js {{}} syntax.

• javascript
• django
• vuejs2

Share Improve this question Follow asked Apr 22, 2017 at 21:34 CostantinCostantin 2,65688 gold badges3434 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

You can change Vue's interpolation delimiters to whatever you want.

var sessions = new Vue({
  el: '#sessions',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue!'
  }
})

That way you can use whatever your framework needs.

Edit

It turned out in this case, @Costantin had more than one div#sessions on the page.

本文标签： javascriptMaking Django amp Vuejs work together withverbatim Stack Overflow