如何正確使用 Laravel 本地化語言字符串作為 vue.js 腳本數據屬性

Question

我在 vue.js 腳本（vue.js 組件腳本 2 片段）中有一個 sweetalert，它可以與兩個 Laravel 本地化語言字符串一起正常工作。 現在我試圖在另一個 vue.js 組件腳本中使用相同的語言字符串作為數據屬性。

問題：它不接受以下 sides.name 屬性。

vue.js 組件腳本 1 片段

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

控制台顯示以下錯誤消息：

app.js:247950 [Vue warn]: data() 中的錯誤：“TypeError：無法讀取未定義的屬性（讀取‘__’）”

這是正常工作的 sweetalert2 Swal 的片段：

vue.js 組件腳本 2 片段

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

我在沒有“this”的情況下嘗試過，但模板中的輸出顯然變成了“offers.front”。

Answer 1

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

請更新

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