How to properly use Laravel localization language-string as vue.js script data property

Question

I have a sweetalert inside a vue.js script (vue.js component script 2 snippet) which is working properly with two Laravel localization language-strings. Now I'm trying to use the same language strings as data properties inside another vue.js component script.

Problem: It don´t accept the following 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>

The console displays the following error message:

app.js:247950 [Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading '__')"

Here is the snippet of the sweetalert2 Swal which is working properly:

vue.js component script 2 snippet

<script>
                Swal.fire(
                    this.__('offers.front'),
                    this.__('offers.back'),
                    'success'
                )
</script>

I tried it with without "this" but then the output in the template obviously becomes "offers.front".

based on the console error it looks like you don't get anything back from the lodash, can you provide some code on how you registered the translation files? — user6363467, Dec 15 '22 at 16:18

score 0 · Accepted Answer · answered Dec 16 '22 at 02:37

0

    <script>
  data: () => ({ // WITHOUT CONTEXT
            sides: [
                {
                    id: 1,
                    name: this.__('offers.front'), // THIS ERROR
                },
                {
                    id: 2,
                    name: this.__('offers.back'),
                }
            ],
    }),
</script>

Please update for

<script>
  data() {
    return { 
            sides: [
                {
                    id: 1,
                    name: this.__('offers.front'),
                }
            ]
    }
  }
</script>

answered Dec 16 '22 at 02:37

Царь всея мира

106
5

Thank you very much, this works. I have now dealt more intensively with the "this" context and understand that the problem was due to the wrong "data" writing in this case – iggivannaz Dec 16 '22 at 07:15
I thought you'd like it. – Царь всея мира Dec 22 '22 at 19:28

How to properly use Laravel localization language-string as vue.js script data property

1 Answers1