web-dev-qa-db-fra.com

Conflit sur Template of Twig et Vue.js

Je fais un programme en utilisant Slim 2 qui utilise Twig comme moteur de modélisation. donc, il utilise la syntaxe {{ foo }} dans le fichier php. Par contre, j'utilise vue.js, il utilise aussi {{ bar }}. 

Par exemple.

Je vais faire la liaison à double sens, ci-dessous est mon code HTML.

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

et voici mon code de vue js.

new Vue({

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

Le monde Hello devrait donc figurer dans la valeur de l'étiquette.

La sortie est l'image ci-dessous.

enter image description here

Cela n'a pas fonctionné, le système a probablement pensé qu'il s'agissait d'une variable de type Rameau. J'ai donc vérifié en passant variable dans une vue.

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

J'ai donc vérifié que la valeur de l'étiquette: indique la variable que j'ai transmise à partir du fichier PHP et non du code VUE.

C'est difficile à expliquer, mais vous comprenez le problème. Je me demandais comment contourner le modèle de twig et utiliser le {{ }} de vue également.

enter image description here

javascriptsymfonytwigvue.js
44
Wesley Brian Lachenal

Il suffit de changer les délimiteurs par défaut pour la vue. Voici comment:

Vue.js 1.0

Définir les délimiteurs globalement.

Vue.config.delimiters = ['${', '}']

Docs

Vue.js 2.0

Définir le délimiteur par composant.

new Vue({
    delimiters: ['${', '}']
})

Docs

85
Yauheni Prakopchyk

Dans ce cas, vous pouvez changer le marqueur de balise vue.js (le cas échéant) ou utiliser la balise verbatim twig (beaucoup mieux à mon avis) qui marque une section en tant que texte brut qui ne devrait pas être évalué par l'analyseur twig. c'est à dire:

{% verbatim %}
    new Vue({

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

À partir des documents de brindille:

La balise mot à mot marque les sections comme étant du texte brut qui ne devrait pas être analysé. Par exemple, pour mettre la syntaxe Twig comme exemple dans un modèle, vous devez peut utiliser cet extrait:

43
felipsmartins

Je lis dans une autre question similaire à faire:

{{"{{vue.js variable here}}"}}

pour le rendre plus court. Cela fonctionne dans certains cas pour moi. Mais, tu aimerais peut-être le voir quand même ...

Je n'ai pas encore réussi à le faire fonctionner dans tous les domaines de mon code.

11
TDawg

Pour Vue JS 2 (pas sûr de 1). Vous pouvez utiliser:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

Selon la documentation: https://vuejs.org/v2/api/#v-text

6
James Burke

Juste un heads-up. Sur Vue JS 2. Pour cela, ajoutez un objet à Vue.

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}
3
Wesley Brian Lachenal

Ceci est testé et fonctionne - vue js vars dans le template twig:

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })
0
Denise Ignatova

Aussi, pour ceux qui ne veulent pas changer le délimiteur de la vue, vous pouvez changer le délimiteur Twig (en utilisant le framework Silex php dans cet exemple):

$app->before(function() use ($app){
    $app['twig']->setLexer( new Twig_Lexer($app['twig'], [
        'tag_comment'   => ['[#', '#]'],
        'tag_block'     => ['[%', '%]'],
        'tag_variable'  => ['[[', ']]'],
        'interpolation' => ['#[', ']'],
    ]));
});

https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax

0
kiba

J'utilise VueJs v2, avec la syntaxe suivante:

<img id="bookCover" style="border:none;width:200px" :src="book.cover">

Où book.cover est l'un des champs myVueInstance. $ Data.book.

Voici les docs

0
MiguelPragier

La meilleure solution est de ne pas changer l’un ou l’autre des délimiteurs.

Vous pouvez utiliser le balisage vuejs dans twig comme 

{{mytwigvar}} {{'{{'}} myvuevar {{'}}'}}

Évidemment, ça craint .... alors redéfinissez votre twig loader pour prétraiter les fichiers et remplacez {{{par {{'{{}} et}}} par {{'}} '}} alors vous pouvez écrire le balisage comme

{{mytwigvar}} {{{myvuevar}}}

Beaucoup mieux.

0
matthew roxburgh