web-dev-qa-db-ja.com

TwigとVue.jsのテンプレートの競合

テンプレートエンジンとしてTwigを使用するSlim 2を使用するプログラムを実行しています。そのため、phpファイルでは{{ foo }}という構文を使用します。一方、私はvue.jsを使用していますが、{{ bar }}も使用しています。

例えば。

双方向バインディングを行います。以下は私のhtmlコードです。

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

ここに私のvue jsコードがあります。

new Vue({

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

したがって、Hello worldはLabel Valueに含まれている必要があります。

出力は以下の画像です。

enter image description here

これは機能しませんでしたが、おそらくシステムはtwig変数だと考えました。そこで、変数をビューに渡して確認しました。

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

そこで、ラベル値：をチェックしました。PHPコードではなくVUEファイルから渡した変数を示しています。

説明するのは難しいですが、ポイントを得ることができます。小枝のテンプレートをバイパスし、vueから{{ }}を使用する方法についても疑問に思っていました。

enter image description here

javascriptsymfonytwigvue.js
52
Wesley Brian Lachenal

Vueのデフォルトの区切り文字を変更するだけです。方法は次のとおりです。

Vue.js 1.0

区切り文字をグローバルに定義します。

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

ドキュメント

Vue.js 2.0

コンポーネントごとに区切り文字を定義します。

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

ドキュメント

99
Yauheni Prakopchyk

この場合、vue.jsタグマーカー（存在する場合）を変更するか、セクションを評価しない生テキストとしてマークするtwig verbatim tag（私の意見でははるかに良い）を使用できます。 by twigパーサー。すなわち：

{% verbatim %}
    new Vue({

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

twig docs：から

逐語的なタグは、解析されるべきではない生のテキストとしてセクションをマークします。たとえば、Twig構文を例としてテンプレートに入れるには、次のスニペットを使用できます。

46
felipsmartins

私は別の同様の質問を読みました：

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

短くするために。それは私のためにいくつかのケースで動作します。しかし、とにかくそれを見たいと思うかもしれません...

私はまだコードのすべての領域でそれを動作させることに成功していませんでした。

11
TDawg

Vue JS 2（1についてはわからない）。以下を使用できます。

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

ドキュメントに従って： https://vuejs.org/v2/api/#v-text

8
James Burke

ちょっと待って。 On Vue JS 2.これを行う方法は、Vueにオブジェクトを追加することです。

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

区切り文字を変更したり、コンポーネントの再利用性を低くしたり、可読性の低い二重エスケープメカニズムを使用したりする代わりに、Twigの source 関数を使用できます。

ソース関数は、レンダリングせずにテンプレートのコンテンツを返します。

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

例：

<!-- 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>
2
naitsirch

最善の解決策は、どちらの区切り文字も変更しないことです。

twigのようにvuejsマークアップを使用できます

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

これは明らかに最適ではないため、twigローダーを再定義してファイルを前処理し、{{{ with {{ '{{' }}および}}} with {{ '}}' }}その後、次のようにマークアップを書くことができます

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

ずっといい。

2
matthew roxburgh

また、vueの区切り文字を変更したくない場合は、Twig区切り文字を変更できます（この例ではSilex phpフレームワークを使用）：

$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

1
kiba

これはテストされ動作しています-vue js vars in twig template：

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

以下の構文でVueJs v2を使用しています。

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

ここで、book.coverはmyVueInstance。$ data.bookフィールドの1つです。

ドキュメントはこちら

0
MiguelPragier