Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Вставьте переменные symfony с массивом объектов в компонент vue.js из шаблона ветки

Автор вопроса: LukaОтветов: 2

Я использую symfony5 и хотел бы интегрировать vue.js в один из моих шаблонов веток. Мне нужно иметь возможность передавать 3 разных объекта в vue.js. Мне нужно передать несколько массивов, которые обычно хранят несколько объектов, в компонент vue, поэтому после установки vue.js я сделал следующее.

Как мне получить доступ к группам в компоненте vue, и правильно ли я делаю это, вводя массив в свой компонент? мне нужно использовать $jsonContent = $serializer-›serialize($groups, 'json') в контроллере или я могу оставить массив как есть?

// активы/js/app.js

import Vue from 'vue';
import Example from './components/Example'

new Vue({
    el: '#app',
    components: {Example}
});

// активы/js/components/Example.vue

<template>
<div>
    <h2 class="center">My Application</h2>
    <div v-text="message"></div>
    <pre>{{ groups }}</pre>
    <ul>
        <li :key="group.id" v-for="group in groups">{{ group }}</li>
    </ul>
</div>

<script>
export default {

    data() {
        return {
            message: "A list of groups",
            groups: [],

        };
    },

    mounted() {
        this.groups = this.$el.attributes['groups'].value;
        console.log(this.groups);


    }
};
</script>

<style>
.center {
    text-align: center;
}
</style>

в моем представлении ветки у меня есть следующее

    <div ref="groups"  v-bind:groups="{{ groups2|json_encode }}"></div>

    <div id="app">
        <example></example>
    </div>

группы обычно выглядят так:

  array:5 [▼
  0 => App\Document\Group {#630 ▶}
  1 => App\Document\Group {#627 ▶}
  2 => App\Document\Group {#638 ▶}
  3 => App\Document\Group {#641 ▶}
  4 => App\Document\Group {#644 ▶}
]

so I used a serializer in the controller

 'groups2' => $jsonContent = $serializer->serialize($groups, 'json'),

vuejs2symfony5symfony4

Ответы

Ответ 1 · рейтинг 1 · RicardoAgra

Ответ выше правильный, хотя он мог бы быть более явным. Визуализируйте данные внутри тега script, установите для него значение "application/json", затем заставьте ваш компонент запрашивать dom и анализировать данные при его инициализации с помощью созданного хука жизненного цикла.

PageController.php:

return $this->render('page.html.twig', [
  'array' => json_encode([
     'data1' => $values1,
     'data2' => $values2
   ]),
   'title' => 'Title'
]);

Шаблон ветки:

<script id="pageData" type="application/json">
  {
    "array": {{ array | raw }},
    "title": "{{ title }}"
  }
<script>

Component.vue:

import Vue from 'vue';
import Example from './components/Example'

new Vue({
    el: '#app',
    data: { array: [], title: '' },
    components: {Example},
    created() {
      this.data = JSON.parse(document.getElementById('pageData').innerHTML);

    }
});

Обратите внимание, что вам может понадобиться обновить свое состояние с помощью Vue.set(this.data, 'array', []), если вы просто хотите обновить часть состояния реактивным способом.

Ответ 2 · Denys Bezuhlyi

You cannot use vue syntax in your twig file. The simple way to pass your groups in vue file is to put your groups, that you have in twig files, like that: 

<script type="text/javascript">
    var groups = {{ groups|json_encode()|raw }};
</script>

и затем вы можете получить объект группы из объекта окна js, возможно, есть другие решения

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы