“el.closest 不是 getScrollTarget 的函数”，使用 Quasar Framework (Vue)

Posted 2023-02-23

【中文标题】“el.closest 不是 getScrollTarget 的函数”，使用 Quasar Framework (Vue)

【英文标题】："el.closest is not a function at getScrollTarget", using Quasar Framework (Vue)

【发布时间】：2018-03-21 11:56:16

【问题描述】：

我的模式由可以正常工作的卡片组成。现在我想在模态打开时在视口顶部放置“活动”卡。我正在尝试使用 getScrollTarget 和 setScrollPosition 执行此操作，但出现以下错误：

Uncaught TypeError: el.closest is not a function at getScrollTarget     (quasar.esm.js?8bfb:1384)
     at VueComponent.open (ModalTest.vue?4a7f:120) 
     at VueComponent.boundFn [as open] (vue.runtime.esm.js?ff9b:165)
     at VueComponent.openModal (Maplayout.vue?1988:60)
     at VueComponent.boundFn [as openModal] (vue.runtime.esm.js?ff9b:165)
     at Vue$3.eval (Maplayout.vue?1988:47)
     at Vue$3.Vue.$emit (vue.runtime.esm.js?ff9b:2202)
     at Object.$emit (quasar.esm.js?8bfb:198)
    at htmlElement.emitEventFunction (util.js?93ee:587)

模态组件如下所示：

<template>
    <q-modal ref="myModal" maximized>
      <q-modal-layout class="scroll">
        <div class="layout-padding">
          <q-card inline
                  center
                  style="min-width: 90vw"
                  v-for="test in tests"
                  :key="tests.id"
          >
            <q-card-media>
              <img :src="test.getAttribute('image')">
            </q-card-media>
            <q-card-main>
              <div> test.getAttribute('myAttribute') </div>
            </q-card-main>
          </q-card>
        </div>
      </q-modal-layout>
    </q-modal>
</template>
<script>
import 
  QCard,
  QCardMain,
  QCardMedia,
  QModal,
  QModalLayout,
  scroll
 from 'quasar'
const getScrollTarget, setScrollPosition = scroll
export default 
  name: 'myModal',
  components: 
    QCard,
    QCardMain,
    QCardMedia,
    QModal,
    QModalLayout,
    scroll
  ,
  computed: 
    ...myState(
      tests: state => state.mymodule.tests
    )
  ,
  methods: 
    open () 
      this.$refs.myModal.open()
      const element = document.getElementById('feature-listing').getElementsByClassName('item-image active')
      console.log('element: ', element)
      setScrollPosition(getScrollTarget(element), 0, 200)
    
  

</script>

console.log 的输出提供了有关在控制台中处于活动状态的element 的以下信息： [div#98729.item-image.js-fade.my-quick-fade-in.active, 98729: undefined]

我不太了解“未定义”部分...（数组的长度是 1...，所以可能不相关或其他什么...？！），因为 div 可以在控制台中打开对我来说看起来不错。

我正在尝试关注this in the docs。我还查看了“最接近”here 的 polyfill 的代码。

【参考方案1】：

错误原因是没有引用有效的 div。当我使用 element[0] 时，它开始工作。

另外，模态中的滚动方法只有在模态正确打开后才会给出值，所以需要使用@open事件。详情请见this。