1***@qq.com
1***@qq.com
  • 发布:2024-11-20 12:44
  • 更新:2024-11-26 09:55
  • 阅读:222

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'dataset' of null"

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Sequoia 15.1

第三方开发者工具版本号: 2.0.2-4000820240401001

基础库版本号: 3.6.6

项目创建方式: CLI

CLI版本号: ~4.5.0

示例代码:
this.$nextTick(() => {  
  console.log('打印了组件变量值:', this.$refs.MyComponent.X)  
})

操作步骤:

点击点我进入A包

预期结果:

不报错,能打印出1

实际结果:

报错
[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'dataset' of null"
(found in packageA/pages/pageA/index.vue)

bug描述:

项目配置分包,小程序中分包A中A页面使用分包B中的组件,A页面配置了componentPlaceholder。
在A的onLoad周期中使用$nextTick获取组件内部的值报错。
[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'dataset' of null"
(found in packageA/pages/pageA/index.vue)

2024-11-20 12:44 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - 隔壁小王同学

1***@qq.com

1***@qq.com (作者) - 隔壁小王同学

/packageA/index.vue  

<template>  
...  
<MyComponent ref="MyComponent"></MyComponent>  
...  
</template>  

...  
<script>  
...  
import MyComponent from '@/packageB/components/MyComponent/MyComponent.vue'  
...  
...  
 onLoad() {  
    this.$nextTick(() => {  
      console.log('打印了组件变量值:', this.$refs.MyComponent.X)  
    })  
  },  
...  
</script>
/packageB/components/MyComponent/MyComponent.vue  

<template>  
...  
</template>  
<script>  
...  
data  () {  
    return {  
      X: 1  
    }  
  },  
...  
</script>
pages.json  

...  
{  
  "path": "pages/pageA/index",  
  "style": {  
    "navigationBarTitleText": "A页面",  
    "componentPlaceholder": {  
      "my-component": "view"  
    }  
  }  
},  
...
1***@qq.com

1***@qq.com (作者) - 隔壁小王同学

针对小程序处理,能否有个监听到所有组件异步化加载完成后的页面生命周期

1***@qq.com

1***@qq.com (作者) - 隔壁小王同学

// /packageA/index.vue的页面周期里面这样写在微信开发者工具里面不会报错,但是在预览真机里面会报错  

...  
onLoad() {  
  this.$nextTick(() => {  
    setTimeout(() => {  
      console.log('打印了组件变量值:', this.$refs.MyComponent.X)  
    }, 200);  
  })  
},  
...
蔡cai

蔡cai

你试下这样子写
this.$nextTick(function() {
setTimeout(() => {
console.log('打印了组件变量值:', this.$refs.MyComponent.X)
}, 200);
})

  • 蔡cai

    或者在onReady生命周期执行看看

    2024-11-22 13:47

1***@qq.com

1***@qq.com (作者) - 隔壁小王同学

感谢,好像没有api获取组件加载完成后执行的,settimeout有可能网络不好存在获取不到组件实例的情况

  • 靐齉齾麤龖龗

    可以使用uni.$emit这种工具,在组件中执行完成之后使用uni.$emit触发你页面上的uni.$on监听的数据这样来实现

    2024-11-26 10:07

要回复问题请先登录注册