javascript - Conflitto sul modello di ramoscello e Vue.js




symfony twig (7)

Sto facendo un programma usando Slim 2 che usa Twig come mio motore di template. quindi utilizza la sintassi {{ foo }} nel file php. D'altra parte, sto usando vue.js, usa anche {{ bar }} .

Per esempio

Farò l'associazione a due vie, di seguito è il mio codice HTML.

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

ed ecco il mio codice jue vue.

new Vue({

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

Quindi il mondo Hello dovrebbe essere nel valore dell'etichetta.

L'output è l'immagine qui sotto.

Che non ha funzionato, probabilmente il sistema ha pensato che fosse una variabile ramoscello. Quindi ho controllato passando la variabile in una vista.

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

Quindi ho controllato il valore dell'etichetta: mostra la variabile che ho passato dal file PHP non sul codice VUE.

Un po 'difficile da spiegare, ma ottieni il punto. Mi chiedevo come bypassare il modello di ramoscello e usare anche {{ }} da Vue.


Basta cambiare i delimitatori predefiniti per vue. Ecco come:

Vue.js 1.0

Definire i delimitatori a livello globale.

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

Docs

Vue.js 2.0

Definire il delimitatore in base al componente.

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

Docs


Ho letto in un'altra domanda simile da fare:

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

per renderlo più breve. Funziona in ALCUNI casi per me. Ma, ho pensato che ti sarebbe piaciuto vederlo comunque ...

Non sono ancora riuscito a farlo funzionare in tutte le aree del mio codice.


Inoltre, per coloro che non vogliono cambiare il delimitatore di Vue, puoi cambiare il delimitatore di Twig (usando il framework php Silex in questo esempio):

$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


Invece di modificare i delimitatori, rendere i componenti meno riutilizzabili o utilizzare meccanismi di doppia evasione meno leggibili, è possibile utilizzare la funzione source di Twig.

La funzione di origine restituisce il contenuto di un modello senza renderlo:

{{ source('template.html') }}
{{ source(some_var) }}

Esempio:

<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
    {{ source('path/to/vue-template.html') }}
</script>

<script>
    Vue.component('my-component', {
        template: '#my-template'
    });
</script>

Per Vue JS 2 (non sono sicuro circa 1). Puoi usare:

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

Come da documentazione: https://vuejs.org/v2/api/#v-text


Questo è testato e funzionante - vue js vars in template ramoscello:

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

Sto usando VueJs v2, con la seguente sintassi:

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

Dove book.cover è uno dei campi myVueInstance. $ Data.book.

Ecco i documenti





vue.js