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

问题描述

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

例如

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

标签值:<label>{{ foo }}</label><br>字段值:<input v-model="foo">

这是我的 vue js 代码.

new Vue({el: '.container',数据: {foo:'你好世界.'}});

所以 Hello world 应该在标签值中.

输出如下图.

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

$app->get('/', function() use ($app) {$app->render('login.php', ['富' =>'来自 PHP 文件']);})->姓名('登录');

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

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

解决方案

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

Vue.js 1.0

全局定义分隔符(docs).

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

---

Vue.js 2.0

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

new Vue({分隔符:['${', '}']})

---

Vue.js 3.0

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

Vue.createApp({分隔符:['${', '}']})

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 }}.

E.g.

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>

and here is my vue js code.

new Vue({

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

So the Hello world should be in the Label Value.

The output is the image below.

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');

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

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

解决方案

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

Vue.js 1.0

Define delimiters globally (docs).

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

---

Vue.js 2.0

Define delimiters for component (docs).

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

---

Vue.js 3.0

Define delimiters for application (docs).

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

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