Twig和Vue.js模板上的冲突 [英] Conflict on Template of Twig and Vue.js

问题描述

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

I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }} in php file. On the other hand, I'm using vue.js, it also uses {{ bar }}.

例如

我要做双向绑定，下面是我的html代码。

I'm gonna do the two way binding, below is my html code.

<div class="container">
    Label Value: <label>{{ foo }}</label><br>
    Field Value: <input v-model="foo">
</div>

这是我的vue js代码。

and here is my vue js code.

new Vue({

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

因此Hello世界应该在标签值中。

So the Hello world should be in the Label Value.

输出如下图所示。

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

Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.

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

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

So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.

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

Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the {{ }} from vue also.

推荐答案

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

Just change default delimiters for vue. Here's how:

全局定义分隔符。

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

文档

按组件定义分隔符。

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

Docs

这篇关于Twig和Vue.js模板上的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！