Twig 模板与 Vue.js 冲突

Question

我正在使用 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 world 应该在 Label Value 中。

输出如下图。

没有成功，可能是系统认为是twig变量。所以我通过在视图中传递变量来检查。

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

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

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

Answer 1

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

{% verbatim %}
    new Vue({

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

来自 twig 文档：

The verbatim tag marks sections as being raw text that should not be parsed. For example to put Twig syntax as example into a template you can use this snippet:

Verbatim tag

Answer 2

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

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

让它更短。它在某些情况下对我有用。但是，我想你还是会喜欢看的...

我还没有成功让它在我的代码的所有区域工作。

Answer 3

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

Vue.js 1.0

全局定义分隔符 (docs)。

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

Vue.js 2.0

为组件 (docs) 定义分隔符。

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

Vue.js 3.0

为应用程序定义分隔符 (docs)。

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

Answer 4

提醒一下。在 Vue JS 2 上。这样做的方法是向 Vue 添加一个对象。

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

Answer 5

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

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

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

Answer 6

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

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

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

Here's the docs

Answer 7

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

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

你可以像这样在 twig 中使用 vuejs 标记

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

这显然是次优的，所以重新定义你的树枝加载器来预处理文件，并将 {{{ 替换为 {{ '{{' }} 并将 }}} 替换为 {{ '}}' }} 然后你可以将标记写为

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

好多了。

Answer 9

这已经过测试并且可以工作 - twig 模板中的 vue js 变量：

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

Answer 10

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

The source function returns the content of a template without rendering it:
{{ 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>

Answer 11

对我来说，组合：分隔符：['${', '}'] 和 ${VueVariable}

Twig 模板与 Vue.js 冲突

Conflict on Template of Twig and Vue.js

javascript

symfony

twig

vue.js

Vue.js 1.0

Vue.js 2.0

Vue.js 3.0