Окно не определено в nuxt js

Question

Итак, я хотел связать стиль с высотой другого элемента, который я получил от функции getHeight, но я продолжал получать сообщение об ошибке, что указанное окно не определено.

Может кто-нибудь дать мне решение?

Вот мой исходный код:

<template>
  <div class="container">
    <p class="section-title">past event</p>
    <div class="columns is-multiline">
      <div
        class="column is-one-third is-centered past-events"
        v-for="(event, index) in events.slice(0, 2)"
        :key="index"
      >
        <EventCard :event="event" />
      </div>
      <div class="column is-one-third is-centered">
        <div class="link-box" :style="{ height: getHeight() }">
          <nuxt-link to="/past-events">
            <p style="color: #ffffff; cursor: pointer" class="see-all">
              Lihat List Event Lainnya
            </p>
          </nuxt-link>
        </div>
      </div>
    </div>
    <a class="see-all-btn"> </a>
  </div>
</template>

<script>
import EventCard from "~/components/EventCard.vue";

export default {
  name: "PastEvents",
  components: {
    EventCard
  },
  props: ["events"],
  data() {
    return {};
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight() {
      const height = window.getComputedStyle(
        document.querySelector(".past-events")
      ).height;
      console.log(height);
      return height + "px";
    }
  }
};
</script>

Answer 1

Да window не существует во время ловушки жизненного цикла mounted.Я предполагаю, что вы пытаетесь разместить что-то на основе его позиции?

В этом случае вы могли бы быть в состоянии использовать CSS, чтобы сделать это для вас.Вы можете размещать элементы, используя единицы измерения Высота просмотра / Ширина просмотра.Объедините это с CSS calc(), и вы можете получить необходимое решение.

Пример:

.element {
  /* make element positon relative to the window */
  position: fixed;
  /* set position - note vw/vh are % of window */
  /* this put the top of your element -200px from the bottom of your window */
  top: calc(100vh - 200px);
}

---

Если вы делаете что-то более сложное Использование Javascript element.getBoundingClientRect(), скорее всего, обеспечит то, что вам нужно.См. этот ответ для получения дополнительной информации.

Answer 2

Nuxt использует серверный рендеринг.Это означает, что когда ваш код выполняется на сервере, он не имеет что-то вроде window.В конце концов, это не браузер.

Самый простой способ обойти это - обернуть все, что не должно быть предварительно обработано в html, с чем-то вроде vue-no-ssr.Эта конкретная библиотека отображает фиктивный компонент на сервере, а затем фактически отображает его, когда попадает в браузер.