Twig和Vue.js模板上的冲突

Question

我正在使用Slim 2做一个程序,它使用Twig作为我的模板引擎.所以它使用{{ foo }}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世界应该在Label Value中.

输出如下图所示.

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

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

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

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

Answer 1

只需更改vue的默认分隔符即可.这是如何做:

Vue.js 1.0

全局定义分隔符.

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

文件

Vue.js 2.0

根据每个组件定义分隔符.

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

文件

Answer 2

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

{% verbatim %}
    new Vue({

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

从枝条文档:

verbatim标记将段标记为不应解析的原始文本.例如,要将Twig语法作为示例放入模板,您可以使用此代码段:

• 逐字标记

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: ['${', '}'],
}