Vue组件data箭头函数中使用Laravel本地化字符串报错求助

问题场景 #

在Vue.js组件的Sweetalert2代码里，能正常通过this.__('xxx')调用Laravel本地化字符串，但在另一个组件的data选项使用箭头函数写法时，把本地化字符串作为数组元素的name属性会触发错误。

报错代码片段 #

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

控制台错误信息 #

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

正常工作的代码（Sweetalert2中） #

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

尝试去掉this后，模板中只会显示原始字符串（如offers.front），不会展示本地化后的内容。

解决方案 #

原因 #

箭头函数没有自身的this上下文，它会继承外层作用域的this。Vue组件的data选项用箭头函数时，this不会指向组件实例，因此无法访问挂载在实例上的__方法。

解决方法 #

1. 将data改为普通函数写法（推荐）
   把箭头函数换成普通函数，此时this会指向Vue组件实例，就能正常调用__方法：

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

2. 直接调用全局挂载的__方法（备选）
   Laravel通常会把本地化函数挂载到全局window对象上，若必须用箭头函数，可直接调用全局方法：

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

注意：这种方式依赖全局变量，耦合性较高，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者iggivannaz