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('事件名称', () => {})

但我会向您展示 vanilla 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);
 }

最后，我们希望在请求完成时使用窗口或 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