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 中。

输出如下图。

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

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

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

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

原文由 Wesley Brian Lachenal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需更改 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: ['${', '}']
})

原文由 Yauheni Prakopchyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 {% verbatim %}
    new Vue({

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

从树枝文档：

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

• 逐字标记

原文由 felipsmartins 发布，翻译遵循 CC BY-SA 3.0 许可协议