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