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

我正在通过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()获取数据后，滚动到元素的正确方式是什么？

最佳答案

我建议在Vue中使用我不太确定的事件，在角度上我们有：
$scope.$broadcast('event-name', data)
$scope.$on('event-name', () => {})
但我会向你展示香草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')

听烤肉串的版本将没有效果：

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

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

asyncdata

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