Passing twig data to vue js in symfony 4 - symfony

Question

I am using a component named "vue-cookie-law in my symfony application so I call it like that in my base (default twig template):
<div id="CookieLaw" data-locale="{{ app.request.locale }}"></div>
and then in my vue template I have this:
<template>
<div id="CookieLaw">
<cookie-law theme="base" transitionName="slideFromBottom">
<div slot="message">{{ locale }}En poursuivant votre navigation sur notre site vous acceptez l'utilisation de cookies, pour vous proposer des contenus personnalisés en fonction de vos centres d'intérêt et mesurer la fréquentation de nos services, pour en savoir plus et paramétrer les cookies, cliquez ici </div>
</cookie-law>
</div>
</template>
<script>
import CookieLaw from 'vue-cookie-law'
export default {
data() {
return {
locale: ""
}
},
components: { CookieLaw },
beforeMount: () => {
this.locale = this.$el.attributes['data-locale'].value;
}
}
</script>
<style scoped>
.Cookie {
background: white;
padding: 2rem;
}
</style>
And my js part :
import Vue from 'vue';
import CookieLaw from './components/CookieLaw';
new Vue({
el: '#CookieLaw',
render: h => h(CookieLaw)
});
So I try to pass the locale variable of my app but I have an error like that :
[Vue warn]: Error in beforeMount hook: "TypeError: _this.$el is undefined
So it seems I can't access my data attributes like that. Any idea on what I'm doing the wrong way here ? could it be a conflict between twig and vue ?

Answer 1

Have you checked the value of this.$el? I suspect that it targets <div id="CookieLaw" data-locale="{{ app.request.locale }}"></div> but in that case the latter element would be replaced by your Vue template.
If that's the case you should put the data-attribute in an element over it and instead of this.$el.attributes['data-locale'].value you write this.$el.previousElementSibling.getAttribute('data-locale').value
I would like to add also that your lifecycle hook is beforeMount but your element does not still exist at this point; try with mounted()instead