Inject symfony variables with array of Objects to a vue.js component from a twig template

Question

I am using symfony5 and would like to integrate vue.js in one of my twig template views. I need to be able to pass 3 different Objects to vue.js. I have to pass on multiple Arrays which store normally multiple Objects to a vue component so I have done the following after installing vue.js

How would I access groups in the vue component and am I doing it the right way injecting the array to my component? do I have to use $jsonContent = $serializer->serialize($groups, 'json') in the controller or can I leave the array as it is?

// assets/js/app.js

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

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

// assets/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>

in my twig view I have the following

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

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

groups normally looks like this:

  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'),

RicardoAgra · Accepted Answer · 2020-07-23 13:44:39Z

1

The answer above is correct, though it could be more explicit. Render the data inside a script tag, set it to 'application/json', then make your component query the dom and parse the data when it initializes with the created lifecycle hook.

PageController.php:

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

Twig Template:

<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);
      
    }
});

Note that you might need to update your state with Vue.set(this.data, 'array', []) if you just want to update part of the state in a reactive way.

edited Jul 23, 2020 at 13:44

answered Jul 22, 2020 at 15:50

RicardoAgra

6801 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luka Over a year ago

Thank you very much. I seem to be very close even if it took me a while to get it to run because of a JSON Error etc. I will now try to figure out how to run this through a loop and print out the group_name, but I should be able to find this out. The more difficult will be how I can add another variable which saves all the current permissions to vue. I tried adding it after the {{ array | raw }} but that does not work do I have to add a second <script id="pageData2" type="application/json"> ?

RicardoAgra Over a year ago

@Luka Updated the answer to account for multiple ways to display multiple data. You may want to google JSON validator to make sure your JSON is rendering correctly. Also, don't forget to run your PHP variable through json_encode(), which should return a valid JSON.

Denys Bezuhlyi · Accepted Answer · 2020-07-22 15:35:36Z

0

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>

and than, you can get groups object from window js object, may be there are other solutions

answered Jul 22, 2020 at 15:35

Denys Bezuhlyi

191 silver badge2 bronze badges

1 Comment

Luka Over a year ago

Thank you ver much. As RicardoAgra said it seems to be the correct answer, but I am lacking a bit knowledge to be able to figure out the rest, like how I could access var groups on the other side in my vue component.

Collectives™ on Stack Overflow

Inject symfony variables with array of Objects to a vue.js component from a twig template

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related