Making Django & Vue.js arbeiten zusammen mit {% verbatim%}

Question

Ich versuche, Django & Vue zusammenarbeiten, obwohl sie die gleiche {{X}} Template-Syntax teilen.

Ich weiß, dass von django 1.5 können wir das {% verbatim %} Tag verwenden. Also dachte ich, ich könnte wie gewohnt Django-Templates verwenden und in dem Abschnitt, in dem ich VUE übernehmen muss, würde ich einfach das {% verbatim%} -Tag verwenden. Anstatt jedoch meine Vue-Daten zu laden, lädt django die {{ variable }}.

Zum Beispiel mein django Code wie folgt aussieht etwas:

{% verbatim %} 

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

{% endverbatim %} 

Und in meinem app.js Datei ich habe:

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

Aber statt Hello Vue! von Rendering macht es {{message}}

Die Konsole zeigt keinen Fehler an und lädt wue korrekt.

Wie kann ich die beiden zusammen arbeiten lassen? Idealerweise ohne die vue.js {{}} Syntax ändern zu müssen.

Answer 1

Sie können Vues interpolation delimiters ändern, was Sie wollen.

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

Auf diese Weise können Sie verwenden, was auch immer Ihr Framework benötigt.

bearbeiten

Es stellte sich in diesem Fall herausstellte, hatte @Costantin mehr als eine div # Sitzungen auf der Seite.