如何将带有翻译字符串的对象从 symfony twig 传递到 vue 组件

Question

我正在使用 shopware (symfony twig) 并从 vue 获得了一个我必须实现的小应用程序。我只想从商店传递一个带有翻译字符串的对象，以用作组件中的文本，但我只得到对象键，值是空的。

在我的树枝模板中：

{% set snippets = 
 {
 header: example.header|trans
 }
%}
<div id="app" snippet={{ snippets|json_encode() }}>
  <demo></demo>
</div>
<script>
 new Vue({
  components: {
   demo: Component
  }
 }).$mount('#app')
</script>

在我得到的 vue 组件中

 data() {
  let snippetSet = document.getElementById('app').getAttribute('snippet')
  return {
   snippet: snippetSet,
  }
 },
 mounted() {
  console.log(this.snippet);
 }

输出为 {"header":""}

这是我第一次使用这个堆栈，所以我非常感谢任何关于如何以不同的方式实现我的目标的建议。

Answer 1

您必须将一个字符串传递给 trans 函数，现在您正在尝试读取一个不存在的变量。

这应该有效：

{% set snippets = 
 {
 header: "example.header"|trans
 }
%}

如何将带有翻译字符串的对象从 symfony twig 传递到 vue 组件

How to pass an object with translation strings from symfony twig to a vue component

symfony

twig

vue.js

shopware