javascript-Twig和Vue.js的模板冲突

我正在使用Slim 2做一个程序,该程序使用Twig作为模板引擎。 因此它在php文件中使用语法{{ }}。 另一方面,我正在使用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

它不起作用,可能系统认为这是一个树枝变量。 所以我通过在视图中传递变量来检查。

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

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

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

enter image description here

10个解决方案
101 votes

只需更改vue的默认定界符即可。 就是这样:

Vue.js 1.0

全局定义定界符。

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

文件


Vue.js 2.0

在每个组件的基础上定义定界符。

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

文件

Yauheni Prakopchyk answered 2020-01-14T13:12:09Z
47 votes

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

{% verbatim %}
    new Vue({

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

从树枝文档:

逐字标记将部分标记为原始文本,不应   解析。 例如,将Twig语法作为示例放入模板中,   可以使用以下代码段:

  • 逐字标记
felipsmartins answered 2020-01-14T13:12:43Z
11 votes

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

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

使它更短。 它在某些情况下对我有用。 但是,以为您可能还是希望看到它...

我尚未成功使其在我的代码的所有方面都能正常工作。

TDawg answered 2020-01-14T13:13:12Z
8 votes

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

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

根据文档:[https://vuejs.org/v2/api/#v-text]

James Burke answered 2020-01-14T13:13:36Z
5 votes

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

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}
Wesley Brian Lachenal answered 2020-01-14T13:13:56Z
2 votes

另外,对于那些不想更改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]

kiba answered 2020-01-14T13:14:21Z
2 votes

您可以使用Twig的{{ source('template.html') }} {{ source(some_var) }} 函数来代替定界符,减少组件的可重用性或使用可读性较低的双重转义机制,而无需使用分隔符。

源函数返回模板的内容而不渲染它:

{{ 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>
naitsirch answered 2020-01-14T13:14:54Z
2 votes

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

您可以像这样在树枝中使用vuejs标记

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

这显然不是最佳选择,因此重新定义树枝加载程序以预处理文件,然后将{{{替换为{{ '{{' }},将}}}替换为{{ '}}' }},然后可以将标记写为

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

好多了。

matthew roxburgh answered 2020-01-14T13:15:27Z
0 votes

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

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

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

这是文档

MiguelPragier answered 2020-01-14T13:15:56Z
0 votes

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

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })
Denise Ignatova answered 2020-01-14T13:16:16Z
translate from https://stackoverflow.com:/questions/31480612/conflict-on-template-of-twig-and-vue-js