Twig和Vue.js的模板冲突

问题描述 投票:52回答:10

我正在使用Slim 2编写程序,该程序使用Twig作为模板引擎。因此它使用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世界应该在标签值中。

输出是下面的图像。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9KVWVNWC5wbmcifQ==” alt =“在此处输入图像描述”>

虽然它不起作用,但系统可能认为这是一个树枝变量。因此,我通过在视图中传递变量进行检查。

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

因此,我检查了Label Value:显示了我从PHP文件传递的变量,而不是VUE代码。

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83aHRnVS5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

我正在使用Slim 2编写程序,该程序使用Twig作为模板引擎。因此它在php文件中使用语法{{foo}}。另一方面,我正在使用vue.js,它也使用{{bar}}。例如。我要去做...

javascript symfony twig vue.js
10个回答
101
投票

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


0
投票

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


48
投票

在这种情况下,您可以更改vue.js标记标记(如果有的话),也可以使用twig逐字标记(我认为更好)将部分标记为原始文本,不应由twig解析器评估。即:


11
投票

我读了另一个类似的问题要做:


8
投票

对于Vue JS 2(不确定1)。您可以使用:


5
投票

只是抬起头。在Vue JS 2上。执行此操作的方法是将一个对象添加到Vue。


2
投票

此外,对于那些不想更改vue分隔符的人,您可以更改Twig分隔符(在此示例中使用Silex php框架:]]

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

2
投票

您可以使用Twig的source函数,而不是更改分隔符,减少组件的可重用性或使用可读性较低的双重转义机制。


2
投票

最佳解决方案是不要更改两个定界符。


0
投票

我正在使用VueJs v2,语法如下:

© www.soinside.com 2019 - 2024. All rights reserved.