symfony - Symfony/vue - 如何将数据从控制器传递到 vue

Question

我正在使用带有 webpack.encore 和 vue.js 的 Symfony 5 / twig。

我将数据（翻译文本）传递给使用的树枝模板，如下所示：

控制器：

class HomepageController extends AbstractController
{
    const PAGE_ID = 2; // constants PageId

    /**
    * @Route("{_locale}/homepage", name="app_homepage")
    *
    */
    public function index(Request $request,SpracheRepository $spracheRepository)
    {
        $arrTrans = $spracheRepository->findAllOfSpecificPage(self::PAGE_ID,$request->getLocale());

        return $this->render('core/homepage/homepage.html.twig', [
            'headline' => $arrTrans['lb_overview'],
            'pageId' => self::PAGE_ID,
            'arrTrans' => $arrTrans
        ]);
    }
}

...我想访问 vue 文件中的数据“arrTrans”。

html.twig 看起来像：

{% block content %}
    <div id="app"></div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('homepage') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('homepage') }}
{% endblock %}

对应的 .js 文件：

import Vue from 'vue';
import App from '../vue/homepage'

new Vue({
    render: (h) => h(App),
}).$mount('#app');

...以及 vue 文件本身：（我想在“button-overview-lable”的 div 中使用 arrTrans）

<template>
    <div class="button-overview">       
            <div class="button-overview-lable">{{ arrTrans['lb_planning'] }}</div>
        </a>
    </div>
</template>

<script>
    export default {
        name: "Homepage",
    }
</script>

<style lang="scss">
    @import "../../../core/app/css/helper/variables";
    @import "../css/homepage";
</style>

标签： symfonyvue.jswebpack

Answer 1

如果您需要将数据从模板文件传递到 javascript 文件，您可以使用 data 属性。

<div id="app" data-trans="{{ arrTrans | json_encode() }}"></div>

new Vue({
  el: '#app',
  data: {
    trans: null
  },
  mounted: function() {
    this.trans = this.$el.getAttribute('data-trans');
  }
});