关于getBoundingClientRect()

Question

改成监听回调，这个方法报错了，请问老师这怎么解决？

Answer 1

Cloud_Iris 2022-10-06 22:12:22

同学，我来回答你。这个大概率是因为 `src/views/main/components/navigation/mobile/index.vue` 里面的代码是这样的

<m-popup v-model="isPopupVisible">
    <menu-vue @onPopupMenuItemClick="handleMenuItemclick"></menu-vue>
</m-popup>

之前这里 menu-vue 子组件在触发  子组件自定义事件 onPopupMenuItemClick 的时候，传递的是index，老师视频里面只改了函数 handleMenuItemclick 的定义和上面 顶部tab触发方法，直接传入item的地方，没有改作为子组件的 menu-vue 。 menu-vue 这里原来的触发是

<li
  v-for="(item, index) in $store.getters.categoryList"
  :key="item.id"
  class="text-lg text-zinc-900 px-1 py-1.5 
      duration-100 active:bg-zinc-100 dark:active:bg-zinc-900"
  click="$emit('onPopupMenuItemClick',index)"
>
  {{item.name}}
</li>

现在很明显应该改成 

$emit('onPopupMenuItemClick',item)

那么自然 v-for 里面也就不需要index了。改完子组件，就能正常地从弹出框也能触发数据更新了。这个和getBoundingClientRect() 这个函数没有关系的。你要看报错信息，去推理，去打印。

望采纳。

• 别人都说我可帅 #1

  棒棒棒！

Answer 2

Sunday 2022-07-23 14:11:28

你好

这个错误指的是 itemRefs[val] 是 undefined。出现这个错误的原因，应该是 watch 执行时，itemRefs[val] 还没有值导致的

• 提问者 YangYYYYY #1

  点击导航条可以，但是点击弹出层不行

• Sunday 回复 提问者 YangYYYYY #2

  这个和点击哪里是没有关系的。主要还是从错误中来看，报错就是  itemRefs[val] 是 undefined。 所以你可能需要找一下为什么回事 undefined

• Cloud_Iris #3

  这个大概率是因为 `src/views/main/components/navigation/mobile/index.vue` 里面的代码是这样的
  
  <m-popup v-model="isPopupVisible">
      <menu-vue @onPopupMenuItemClick="handleMenuItemclick"></menu-vue>
  </m-popup>
  之前这里 menu-vue 子组件在触发  子组件自定义事件 onPopupMenuItemClick 的时候，传递的是index，老师视频里面只改了函数 handleMenuItemclick 的定义和上面 顶部tab触发方法，直接传入item的地方，没有改作为子组件的 menu-vue 。 menu-vue 这里原来的触发是
  
  <li
    v-for="(item, index) in $store.getters.categoryList"
    :key="item.id"
    class="text-lg text-zinc-900 px-1 py-1.5 
        duration-100 active:bg-zinc-100 dark:active:bg-zinc-900"
    click="$emit('onPopupMenuItemClick',index)"
  >
    {{item.name}}
  </li>
  现在很明显应该改成 
  
  $emit('onPopupMenuItemClick',item)
  那么自然 v-for 里面也就不需要index了。改完子组件，就能正常地从弹出框也能触发数据更新了。
  望采纳。