Conflict on Template von Twig and Vue.js

Ich mache ein Programm mit Slim 2, das Twig als Template-Engine verwendet. so verwendet es die Syntax{{ foo }} in der PHP-Datei. Auf der anderen Seite verwende ich vue.js, es verwendet auch{{ bar }}.

Z.B

Ich werde die Zwei-Wege-Bindung machen, unten ist mein HTML-Code.

<div class="container">
    Label Value: <label>{{ foo }}</label><br>
    Field Value: <input v-model="foo">
</div>

nd hier ist mein vue js cod

new Vue({

    el: '.container',
    data: {
        foo: 'Hello world.'
    }
});

So sollte sich die Hello-Welt im Label-Wert befinden.

Die Ausgabe ist das Bild unten.

Welche es nicht geklappt hat, dachte das System wahrscheinlich, es ist eine Zweigvariable. Also habe ich geprüft, indem ich eine Variable in einer Ansicht übergeben habe.

$app->get('/', function() use ($app) {
    $app->render('login.php', [
        'foo' => 'FROM PHP FILE'
    ]);
})->name('login');

So überprüfte ich, das Label Value: zeigt die Variable, die ich von der PHP-Datei nicht auf dem VUE-Code übergeben habe.

Art schwer zu erklären, aber Sie bekommen den Punkt. Ich habe mich gefragt, wie ich die Vorlage von twig umgehen und das @ verwenden sol{{ }} von vue auch.

Antworten auf die Frage(20)

Ihre Antwort auf die Frage