Alpine.JS中方法内this.packetaApiKey为undefined问题求助

问题核心 #

showSelectedPickupPoint方法中访问this.packetaApiKey返回undefined，但pickPoint方法中访问该属性正常，硬编码API key后功能可正常运行。

原因分析 #

将showSelectedPickupPoint作为参数传递给Packeta.Widget.pick时，Packeta的Widget在调用这个回调函数时会改变this的指向，导致this不再指向Alpine组件实例，因此无法访问到packetaApiKey属性。

解决方案 #

有两种简单方式可以修复这个问题：

方法1：用箭头函数包裹回调 #

在pickPoint方法中，用箭头函数包裹回调函数，箭头函数会继承外层作用域的this（即Alpine组件实例），确保showSelectedPickupPoint执行时this指向正确：

pickPoint() {
  Packeta.Widget.pick(this.packetaApiKey, (point) => this.showSelectedPickupPoint(point), this.packetaOptions)
}

方法2：绑定方法的this指向 #

直接将showSelectedPickupPoint定义为箭头函数，或者用bind方法强制绑定this到组件实例：

方式A：箭头函数定义方法

async showSelectedPickupPoint(point) {
  // 这里的this会自动指向组件实例
}

方式B：提前绑定实例引用

function packetaWidget() {
  const instance = this;
  return {
    // ...其他属性
    showSelectedPickupPoint: async function(point) {
      // 使用instance代替this访问组件属性
      const apiKey = instance.packetaApiKey;
      // ...后续逻辑
    },
    // ...其他方法
  }
}

修改后的完整代码示例 #

<div>
    <div x-data="packetaWidget()">
        <x-button type="button" x-on:click="pickPoint()">Select point</x-button>
    </div>

    <script>
        function packetaWidget() {
            return {
                packetaApiKey: '{{ $packetaApiKey }}',
                packetaOptions: {
                    country: "sk",
                    language: "sk",
                    valueFormat: "\"Packeta\",id,carrierId,carrierPickupPointId,name,city,street",
                    view: "modal"
                },

                async showSelectedPickupPoint(point) {
                    if (point) {
                        try {
                            const res = await fetch('https://widget.packeta.com/v6/api/pps/api/widget/v1/validate', {
                                method: 'POST',
                                headers: {
                                    'content-type': 'application/json'
                                },
                                body: JSON.stringify({
                                    apiKey: this.packetaApiKey,
                                    point: {
                                        id: point.id,
                                    },
                                }),
                            })

                            if (!res.ok) throw new Error(res.statusText)

                            @this.set('selectedPickupPoint', await res.json())
                        } catch (err) {
                            console.error(err)
                        }
                    }
                },

                pickPoint() {
                    Packeta.Widget.pick(this.packetaApiKey, (point) => this.showSelectedPickupPoint(point), this.packetaOptions)
                }
            }
        }
    </script>
</div>

@assets
    <script src="https://widget.packeta.com/v6/www/js/library.js" defer></script>
@endassets

内容的提问来源于stack exchange，提问作者Marek Vinárčik