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

Question

I'm getting some data via asyncData and after the items are displayed, the website has to scroll to an element.

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

this.scrollTo() is not available in asyncData .

If I use a timeout in the mounted() method, it works. Without a timeout it doesn't.

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

But I think, this is not the right way. The same thing with this.$nextTick is not working, either.

What is the right way to scroll to an element after getting the data via asyncData() ?

Answer 1

I'd suggest using events i'm not too sure about event dispatching in vue, in angular we have:

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

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

but I'll show in you vanilla js so you can learn how it works under the hood.

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

We'll want to register the event to the window or even better the element that should be targeted.

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))
}
    

next we'll want to set up the listener in your mounted function you'll want to avoid timeouts as what if they're on a slow connection and it takes more than half a second its much more reliable this way.

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

finally we want to dispatch the event when the request has finished using window or an element.dispatchEvent('name-of-event', dataToSend)

EDIT:

how vue does event dispatching

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