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

Я использую 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'),

vue.js vuejs2 symfony5 symfony4
person Luka    schedule 22.07.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ответ выше правильный, хотя он мог бы быть более явным. Визуализируйте данные внутри тега 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', []), если вы просто хотите обновить часть состояния реактивным способом.

person RicardoAgra    schedule 22.07.2020
comment
Большое тебе спасибо. Кажется, я очень близок, даже если мне потребовалось некоторое время, чтобы запустить его из-за ошибки JSON и т. Д. Теперь я попытаюсь выяснить, как запустить это через цикл и распечатать имя_группы, но я должен быть в состоянии чтобы это выяснить. Тем сложнее будет то, как я могу добавить еще одну переменную, которая сохраняет все текущие разрешения для vue. Я попытался добавить его после {{массива | raw }} но это не работает, мне нужно добавить второй ‹script id=pageData2 type=application/json›? - person Luka; 23.07.2020
comment
@Luka Обновлен ответ, чтобы учесть несколько способов отображения нескольких данных. Вы можете использовать валидатор Google JSON, чтобы убедиться, что ваш JSON отображается правильно. Кроме того, не забудьте запустить переменную PHP через json_encode(), которая должна вернуть правильный JSON. - person RicardoAgra; 23.07.2020

arrow_upward
0
arrow_downward

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, возможно, есть другие решения

person Denys Bezuhlyi    schedule 22.07.2020
comment
Большое спасибо. Как сказал RicardoAgra, это кажется правильным ответом, но мне не хватает знаний, чтобы понять остальное, например, как я могу получить доступ к группам var с другой стороны в моем компоненте vue. - person Luka; 23.07.2020