一个小Bug:TypeError: Cannot read properties of null (reading '$el')

74 阅读1分钟

背景:Tab标签跳转功能 给每个组件都绑定了name

<div class="main" v-if="mainPart" v-memo="[mainPart]">
      <DetailSwipe :swipe-data="mainPart.topModule?.housePicture.housePics" />
      <DetailInfos name="描述" :ref="getSectionRef" />
      <DetailFacility name="设施" :ref="getSectionRef" />
      <DetailLandLord name="房东" :ref="getSectionRef" />
      <DetailComment name="评论" :ref="getSectionRef" />
      <DetailNotice name="须知" :ref="getSectionRef" />
      <DetailMap name="地图" :ref="getSectionRef" />
      <DetailIntroduce />
 </div>
const sectionEls = ref({})
const titles = computed(() => {
  return Object.keys(sectionEls.value)
}) 

const getSectionRef = (value) => {
  // sectionEls.push(value.$el)
  const name = value.$el.getAttribute("name")
  sectionEls.value[name] = value.$el
}
// const getSectionRef = (value) => {
//   sectionEls.push(value.$el)
// }

const tabClick = (index) => {
  // console.log('----------');
  const key = Object.keys(sectionEls.value)[index]
  const el = sectionEls.value[key]
  let instance = el.offsetTop
  if(index !== 0){
    instance = instance - 44 
  }
  detailRef.value.scrollTo({
    // $el 拿到根元素
    top: instance,
    behavior:'smooth'
  })

**原因:**因为点击返回到首页会卸载组件,也会执行getSectionRef函数,此时导致value值为空 解决办法

image.png