Estoy tratando de hacer que Django y Vue funcionen juntos a pesar de que comparten la misma sintaxis de plantilla {{ X }}.
Sé que desde django 1.5 podemos usar la etiqueta {% verbatim %} . Así que pensé que podría usar las plantillas de django como de costumbre y en la sección donde necesito que VUE se haga cargo, simplemente usaría la etiqueta {% verbatim %}. Sin embargo, en lugar de cargar mis datos de vue, Django carga la {{ variable }} .
Por ejemplo, mi código Django se parece a esto:
{% verbatim %} <div id='sessions'> <h2>{{message}}</h2> </div> {% endverbatim %}Y en mi archivo app.js tengo:
var sessions = new Vue({ el: '#sessions', data: { message: 'Hello Vue!' } }) Pero en lugar de renderizar Hello Vue! muestra {{message}}
La consola no muestra ningún error y, de lo contrario, vue se carga correctamente.
¿Cómo puedo hacer que los dos funcionen juntos? Idealmente, sin la necesidad de cambiar la sintaxis de vue.js {{}}.
Puede cambiar los delimitadores de interpolación de Vue a lo que quiera.
var sessions = new Vue({ el: '#sessions', delimiters: ['${', '}'], data: { message: 'Hello Vue!' } })De esa manera, puede usar lo que necesite su marco.
Editar
Resultó que, en este caso, @Costantin tenía más de un div#sessions en la página.