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中进行事件分派的事件，在角度上我们有：

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

接下来，我们将要在已安装的函数中设置侦听器，您将希望避免超时，因为如果它们处于慢速连接状态，这种方法将花费超过半秒的时间，而这种方法更加可靠。 / p>

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

最后，我们希望在使用窗口或element.dispatchEvent（'event-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之后滚动到元素？

1 个答案: