Within my vue.js script, I have successfully implemented a sweetalert using two Laravel localization language strings. Now, I am attempting to utilize the same language strings as data properties in another vue.js component script.
The issue arises when trying to access the sides.name properties:
Vue.js Component Script 1 Snippet
<script>
data: () => ({
sides: [
{
id: 1,
name: this.__('offers.front'),
},
{
id: 2,
name: this.__('offers.back'),
}
],
}),
</script>
An error message is displayed in the console:
app.js:247950 [Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading '__')"
Below is the snippet for the sweetalert2 Swal that is functioning correctly:
Vue.js Component Script 2 Snippet
<script>
Swal.fire(
this.__('offers.front'),
this.__('offers.back'),
'success'
)
</script>
I attempted to remove "this" but then the output in the template simply shows "offers.front".