Twig和Vue.js模板上的冲突

Question

我正在使用Slim 2做一个程序，它使用Twig作为我的模板引擎。所以它在php文件中使用语法{{ foo }}。另一方面，我使用vue.js，它也使用{{ bar }}。

E.g。

我要进行双向绑定，下面是我的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世界应该在Label Value中。

输出如下图所示。

它没有用，可能系统认为它是一个小枝变量。所以我通过在视图中传递变量来检查。

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

所以我查了一下，标签值：显示我从PHP文件传递的变量而不是VUE代码。

有点难以解释，但你明白了。想知道如何绕过twig的模板并使用vue中的{{ }}。

Answer 1

只需更改vue的默认分隔符即可。方法如下：

Vue.js 1.0

全局定义分隔符。

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

Docs

Vue.js 2.0

基于每个组件定义分隔符。

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

Docs

Answer 2

在这种情况下，你可以更改vue.js标记标记（如果有的话）或使用twig verbatim标记（在我看来更好），它将一个部分标记为原始文本，不应该由twig解析器进行评估。即：

{% verbatim %}
    new Vue({

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

来自twig docs：

  

verbatim标记将部分标记为不应该是原始文本   解析。例如，将Twig语法作为示例放入模板中   可以使用此代码段：

• Verbatim tag

Answer 3

我读了另一个类似的问题：

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

缩短时间。它在某些情况下适用于我。但是，无论如何你还是希望看到它......

我还没有成功地让它在我的代码的所有方面都有效。

Answer 4

对于Vue JS 2（不确定1）。您可以使用：

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

根据文件：https://vuejs.org/v2/api/#v-text

Answer 5

只是抬头。在Vue JS 2.这样做的方法是向Vue添加一个对象。

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

Answer 6

此外，对于那些不想更改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

Answer 7

我正在使用VueJs v2，语法如下：

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

其中book.cover是myVueInstance。$ data.book字段之一。

Here's the docs

Answer 8

最好的解决方案是不要更改任何一个分隔符。

您可以在树枝中使用vuejs标记，如此

{{mytwigvar}} {{＆＃39; {{＆＃39; } myvuevar {{＆＃39;}}＆＃39; }}

这显然很糟糕....重新定义你的twig加载器来预处理文件并替换{{{with {{＆＃39; {{＆＃39; } {}}和}}}与{{＆＃39;}}＆＃39;然后你可以把标记写成

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

好多了。

Answer 9

这已经过测试并且可以正常工作-树枝模板中的vue js vars：

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

Answer 10

您可以使用Twig的source函数，而不必更改定界符，减少组件的可重用性或使用不太可读的双重转义机制。

  

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>