Question

我在vue2应用程序中使用了vee-validate进行表单验证。在单击位置按钮上，我需要滚动到错误消息。

<a href="javascript:void(0)" class="btn btn-success"  style="border-radius: 4px" @click.prevent="addNewLocation"> location
     <span class="ti-plus"></span>
</a>

此处 addNewLocation（）方法操作为：

addNewLocation () {
                this.$validator.validateAll().then(isValid => {
                    if (isValid) {
                        this.$store.commit('order/MUTATE_ADD_NEW_LOCATION', {stair_built_location: this.stair_built_location});
                        let locationArrayIndex = this.order.locations.length - 1;
                        this.$router.push({ name: 'StairHeader', params: { location_index: locationArrayIndex }});
                    } else {
                        window.scrollTo(0,0);
                        console.log('invalid');
                    }
                });
            },

在代码 window.scrollTo（0,0）不起作用。我怎么解决这个问题？

Answer 1

您需要在路由添加功能中使用scrollBehavior，如此

scrollBehavior (to, from, savedPosition) {
     if (to.hash) {
         return { selector: to.hash } 
     } 
  }

它应检测URL中是否添加了#something并滚动到它。

您可以将其与路由器链接一起使用，然后在hash

中传递to="

<router-link :to=" { hash: #IDofDiv } "> scroll to div </router-link>

您还应该能够从代码中添加哈希。您可以在vuejs router docs中找到更多复杂的信息。

请记住添加带有此ID的div。

如何在vue 2单页面应用程序中触发scrolltop？

1 个答案: