跳至点击位置（来自其他Vue组件的访问类）

Question

问题的解释

如果用户单击登录链接，则视图应跳到登录窗口，用户可以在其中键入用户数据。

我知道如何使用document.getElementById('login-window').scrollIntoView()

在单个文件中执行此操作

但是，我有一个包含各种单个Vue.js组件文件的项目。登录链接位于一个"label"组件中。但是实际的登录窗口位于另一个名为"loginWindow"的组件中，因此ID /类"login-window"也存储在"loginWindow"中。

我尝试在"login-window"组件中使用getElementById来捕获"label"元素，但是我相信它不能访问它，因为它在另一个组件中。

这是“ loginWindow”中的模板代码

<template>
  <LoginGrid class="login-window" :as-grid="true" :class="classes" autocomplete="off">
    <OCard class="login-card" :border="false">
      <div class="login-headline f-copy f-bold l-color-primary">{{ t('headline') }}</div>
      <!-- online state -->
      <template v-if="isLogged">
        <OButton color="secondary" @click="onClickLogout">{{ t('logout-label') }}</OButton>
      </template>
      <!-- offline state -->
      <template v-else>
        <div class="login-inputs">
          <LoginInput
            class="login-input-card-number" />
            ...
        </div>

        ...
        <OLink
          type="secondary"
          class="login-mode-link f-regular f-copy-small"
          :no-router="true"
          @click="onSwitchMode"
        >
          {{ modeLabel }}
        </OLink>
        ...
      </template>
    </OCard>
  </LoginGrid>
</template>

这就是我尝试过的

在我的"label"组件中，我已经使用else语句实现了该方法：

export default {
  name: 'loginWindow',

  ...

  methods: {
    onClick() {
      if (this.isLogged) {
       ...
      } else {
          if (isBrowser) {
            document.getElementById("login-window").scrollIntoView();
          }
      }
    },
  },
}

因此，如果用户未登录，则onClick()应该滚动到"login-window"的ID。

但是，此解决方案不起作用。我收到一个错误消息，说"Cannot read property 'scrollIntoView' of null"。

有什么想法如何在Vue.js组件中使用JavaScript做到这一点？

Answer 1

login-window在您的HTML中是Class而不是ID。试试这个：

document.querySelector(".login-window").scrollIntoView();