Error in onChooseAvatar hook: “TypeError: Cannot read property ‘apply‘ of undefined“

After unapp compiles the WeChat applet, it reports an error [Vue warn]: Error in onChooseAvatar hook: "TypeError: Cannot read property 'apply' of undefined"

error message

vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10 [Vue warn]: Error in onChooseAvatar hook: "TypeError: Cannot read property 'apply' of undefined"

(found in pages/my/modifInfo.vue)(env: Windows,mp,1.06.2301160; lib: 2.25.2)
fe @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
Li.e.config.errorHandler @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
yt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
vt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
gt @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
Li.e.__call_hook @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10
In.p.default.__call_hook @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4
n.indexOf.e.<computed> @ vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4
i.safeCallback @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
J @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1677471036886&v=2.25.2:1
a @ VM10 asdebug.js:10
c @ VM10 asdebug.js:10
(anonymous) @ VM10 asdebug.js:1
f @ VM10 asdebug.js:1
g @ VM10 asdebug.js:1
(anonymous) @ VM10 asdebug.js:1
_ws.onmessage @ VM10 asdebug.js:1
vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10 TypeError: Cannot read property 'apply' of undefined
    at gt (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10)
    at a.Li.e.__call_hook (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:10)
    at a.In.p.default.__call_hook (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4)
    at Bo.n.indexOf.e.<computed> [as onChooseAvatar] (vendor.js?t=wechat&s=1677471036886&v=f9c5fe5701ec9bf8121e474b20968fc0:4)
    at Object.i.safeCallback (WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1)
    at WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at J (WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1)
    at WASubContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at WAServiceMainContext.js?t=wechat&s=1677471036886&v=2.25.2:1
    at a (VM10 asdebug.js:10)(env: Windows,mp,1.06.2301160; lib: 2.25.2)

background

Since the WeChat mini program has officially adjusted the method of obtaining user nicknames, here is a special complaint about the WeChat official WeChat nickname and avatar interface method, which has to be changed almost every year. I cannot complain that the best practices given every time are being overturned every year. After all, they are Tencent. If you want to change, change it. If you don't agree, you can't hit him, haha~~

WeChat official adjustments in 2021: https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

Best Practices for 2021

WeChat official adjustments in 2022: https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

Best Practices for 2022

I copied the code to the unapp project and ran it according to the official documentation, https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html , and the result was surprising.

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{
    
    {avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

wrong reason

代码不能单纯的复制过去就行，小程序的bind:chooseavatar=和vue里的不一样不能单纯改为v-bind:chooseavatar=，要改为 @:chooseavatar=

最终的代码

<u-form>
    <u-form-item label="头像">
        <image class="avatar" :src="avatarUrl"></image>
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        </button> 
    </u-form-item>
    <u-form-item label="昵称">
        <input type="nickname" placeholder="请输入昵称" style="text-align:right"/>
    </u-form-item>
</u-form>
<script>
export default {
    data() {
        return {
            avatarUrl: ‘换成默认图片地址’,
        };
    },
    methods: {
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail 
            this.setData({
              avatarUrl,
            })
        },
    }
};
</script>