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

Question

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

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

asyncData中不提供this.scrollTo()。

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

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

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

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

Answer 1

我建议使用事件，我对vue中的事件调度不是很确定，在angular中我们有：

$scope.$broadcast('event-name', data)

$scope.$on('event-name', () => {})

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

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

编辑：

vue如何进行事件调度

this.$emit('myEvent')

收听基于烤肉串的版本不会有任何效果：

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