制作 Django &Vue.js 与 {% verbatim %} 一起工作 [英] Making Django & Vue.js work together with {% verbatim %}

问题描述

我正在尝试制作 django &即使它们共享相同的 {{ X }} 模板语法，Vue 也可以协同工作.

我知道从 django 1.5 开始，我们可以使用 {% verbatim %} 标签.所以我想我可以像往常一样使用 django 模板，在需要 VUE 接管的部分，我将只使用 {% verbatim %} 标签.但是，django 没有加载我的 vue 数据，而是加载了 {{ 变量 }}.

例如我的 Django 代码如下所示:

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

{% 逐字逐句 %}

在我的 app.js 文件中，我有:

var session = new Vue({el: '#sessions',数据: {消息:你好，Vue！"}})

但不是渲染 Hello Vue! 而是渲染 {{message}}

控制台不会显示任何错误，否则 vue 会正确加载.

我怎样才能让两者一起工作?理想情况下无需更改 vue.js {{}} 语法.

解决方案

你可以改变 Vue 的 interpolation delimiters 到任何你想要的.

var session = new Vue({el: '#sessions',分隔符:['${', '}'],数据: {消息:你好，Vue！"}})

这样你就可以使用你的框架需要的任何东西.

编辑

事实证明，在这种情况下，@Costantin 在页面上有多个 div#sessions.

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.

解决方案

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.

这篇关于制作 Django &Vue.js 与 {% verbatim %} 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！