从 VueJs 组件中受益 Symfony/Twig i18n答案

【问题标题】：Benefit Symfony/Twig i18n from VueJs component从 VueJs 组件中受益 Symfony/Twig i18n
【发布时间】：2017-08-02 15:48:46
【问题描述】：

我将 Symfony3 与 Twig 模板和 VueJs 2 一起使用。

我的 symfony 控制器返回一个带有文章组件的 Twig 视图：

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

【问题讨论】：

标签： symfony twig vuejs2

【解决方案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"
});

【讨论】：