symfony - 从 VueJs 组件中受益于 Symfony/Twig i18n

Question

我使用带有 Twig 模板和 VueJs 2 的 Symfony3。

我的 symfony Controller 返回带有 Articles 组件的 Twig View :

{% 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/Twig i18n 翻译我的标题“Mesarticles”，例如 {{ "Mesarticles"|trans({}, "") }}受益于翻译目录。

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>

还有我的 app.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"
});