在 VueJS 组件上运行 TYPO3 Fluid

Question

我有一个 VueJS 组件，我正在尝试通过 Fluid 标签添加翻译文本。

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
  <h2><f:translate key="search.resultPage"/>"{{mutatedQuery}}".</h2>
</div>

标签显示在前端，但<f:translate>标签为空。

Answer 1

假设方向 Fluid \xe2\x86\x92 Vue

\n

事实上，这很棘手，因为 Fluid 不支持推理文字的转义字符，就像{}Vue 或 Angular 等任何其他客户端框架中使用的转义字符一样。

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n

案件	流体模板	渲染输出
1	{{item.value}}	\xc3\xb8
2	{{ item.value }}	{{ item.value }}
3	{{<f:comment/>item.value<f:comment/>}}	{{item.value}}

\n

\n

\n
• 1：空字符串（我们已经知道了）
\n
• 2：有效，在大括号和变量名之间添加空格
\n
• 3：有效，因为<f:comment/>破坏了流体内联模式（但它“丑陋”）
\n

\n

假设方向 Vue \xe2\x86\x92 流体

\n

无法从 Vue（客户端模板和文档片段）调用 Fluid（服务器端渲染）。

\n

替代方案，通过插槽组合两者

\n

可以在 Web 服务器提供的基本模板中使用 Fluid，并使用插槽将内容注入到 Vue 组件，请参阅https://v2.vuejs.org/v2/guide/components-slots.html。

\n

主流体模板：

\n

<div\n  xmlns="http://www.w3.org/1999/xhtml"\n  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">\n\n  <my-app>\n    <template v-slot:resultPageLabel>\n      <f:translate key="search.resultPage"/>\n    </template>\n  </my-app>\n</div>\n

\n

Vuemy-app组件模板：

\n

<h2>\n  <slot name="resultPageLabel"></slot>\n  "{{mutatedQuery}}".\n</h2>\n

\n

Answer 2

我没有成功在Vue上集成Fluid，我认为两者都有不同的渲染引擎并且不能按照我想要的同步。

我通过在另一个标签（未在 vue 中渲染）上添加<f:translate key="search.resultPage"/>a并在 vue 组件上进行翻译来解决这个问题。data-attribute