效益的Symfony /枝條國際化

Question

我用Symfony3用嫩枝模板和VueJs 2.

我的symfony控制器返回與文章分量的嫩枝觀點：

{% extends 'base.html.twig' %} 

{% block body %} 
    <Articles></Articles> 
{% endblock %} 

而且我Articles.vue組件：

<template> 
    <section class="articleapp"> 
     <header> 
      <h1>Mes articles</h1> 
     </header> 
     <div class="main"> 
       <li class="article" v-for="article in articles"> 
        {{ article.title }} 
       </li> 
      </ul> 
     </div> 
    </section> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       articles: [{title: "Voici le nom d'un article"}] 
      } 
     } 
    } 
</script> 

我想與SF /枝條國際化像{{ "Mes articles"|trans({}, "") }}翻譯我的標題是「Mes articles」惠及翻譯目錄。

Answer 1

使用單頁組件是不可能的。

但隨着X-Template，這個問題可以解決：

index.html.twig：

{% extends 'base.html.twig' %} 

{% block title %}{{ "Mes posts"|trans({}, 'app') }}{% endblock %} 

{% block body %} 
    <div id="app"> 
     <post-form></post-form> 
    </div> 
{% endblock %} 

{% block components %} 
    {{ include("components/form.html.twig", {"form": form }) }} 
{% endblock %} 

組件/ form.html.twig：

<script id="post-form-template" type="text/x-template"> 
     <div> 
      {{ "Mon formulaire"|trans({}, '') }} 
      {{ form(form) }} 
      <h1>${ greetings }</h1> 
     </div> 
    </script> 

而且我的應用程序。 js：

import Vue from "vue"; 
import VueResource from "vue-resource" 

Vue.use(VueResource); 

Vue.component('post-form', { 
    delimiters: ['${', '}'], 
    template: '#post-form-template', 
    data: function() { 
     return { 
      greetings: 'Hello' 
     }; 
    } 
}); 

new Vue({ 
    delimiters: ['${', '}'], 
    el: "#app" 
});