Clarification of the issue
When a user clicks on the login link, the view should automatically scroll down to the login window where they can input their credentials.
I know how to achieve this in a single file using
document.getElementById('login-window').scrollIntoView()However, I am working on a project that consists of multiple Vue.js component files. The login link is part of a "label" component, while the login window itself is located in another component called "loginWindow", which also holds the id/class "login-window".
I attempted to access the "login-window" element using getElementById within my "label" component, but it seems unable to retrieve it due to being in a different component.
The template code from "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>
My attempted solution
In my "label" component, I have implemented the following method with an else-statement:
export default {
name: 'loginWindow',
...
methods: {
onClick() {
if (this.isLogged) {
...
} else {
if (isBrowser) {
document.getElementById("login-window").scrollIntoView();
}
}
},
},
}
So when the user is not logged in, clicking on the login link triggers onClick() to scroll to the id "login-window".
Unfortunately, this approach does not work as expected and results in the error message "Cannot read property 'scrollIntoView' of null".
Any suggestions on how to achieve this using JavaScript within a Vue.js component?