问题:如何将带有翻译字符串的对象从 symfony 树枝传递到 vue 组件

我正在使用商店软件(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":""}

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

解答

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

这应该有效:

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