javascript - 如何滚动到 asyncData 之后的元素？

Question

我通过 asyncData 获取一些数据，在显示项目后，网站必须滚动到一个元素。

methods: {
    scrollTo() {
        // ScrollTo Element...
    }
},
asyncData({ env, params }) {
    return axios.get(`${env.cockpit.apiUrl}/collections/get/kalender`)
    .then(({data}) => {
        return {
            items
        }
    })
}

this.scrollTo() 在 asyncData 中不可用。

如果我在 mounted() 方法中使用超时，它就会起作用。如果没有超时则不会。

mounted() {
    setTimeout(() => {
        this.scrollTo()
    }, 500)
}

但我认为，这不是正确的方式。与 this.$nextTick 相同的事情也不起作用。

通过asyncData()获取数据后滚动到元素的正确方法是什么？

Answer 1

我建议使用事件，我不太确定 vue 中的事件调度，在 Angular 中我们有:

$scope.$broadcast('事件名称', 数据)

$scope.$on('事件名称', () => {})

但我将向您展示普通 js，以便您可以了解它在幕后的工作原理。

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

我们希望将事件注册到窗口，甚至更好的是应该定位的元素。

const onDataFetched = new Event('on-kalender-fetched');
    
methods: {
   scrollTo() {
     // ScrollTo Element...
   }
},
        
        
asyncData({ env, params }) {
   return axios.get(`${env.cockpit.apiUrl}/collections/get/kalender`)
      .then(({data}) => {
         return {
           items
         }
       })
       .finally(items => window.dispatchEvent('on-kalender-fetched', items))
}
    

接下来我们要在您安装的函数中设置监听器，您需要避免超时，因为如果它们的连接速度较慢并且需要超过半秒，这样会更可靠。

 mounted() {
    window.addEventListener('on-kalender-fetched', () => this.scrollTo(), false);
 }

最后，我们希望在请求完成时使用 window 或 element.dispatchEvent('name-of-event', dataToSend) 调度事件

编辑:

vue 如何进行事件调度

this.$emit('myEvent')

Listening to the kebab-cased version will have no effect:

<my-component v-on:my-event="doSomething"></my-component>

https://v2.vuejs.org/v2/guide/components-custom-events.html