“el.closest不是getScrollTarget的函数”，使用Quasar Framework（Vue）
问题描述：
我的模态包含可正常工作的卡片。现在我想在模式打开时在视口顶部有“活动”卡。我试图做到这一点使用getScrollTarget和setScrollPosition但我得到以下错误：“el.closest不是getScrollTarget的函数”，使用Quasar Framework（Vue）
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。我还查看了“最接近”的polyfill的代码here。