Question

我使用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>

我想翻译我的标题＆＃34; Mes articles＆＃34;与Sf / Twig i18n一样，{{ "Mes articles"|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 %}

components / 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"
});

从VueJs组件中受益Symfony / Twig i18n

1 个答案: