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

Nuxt使用服务器端渲染。这意味着在服务器上执行代码时，它不会像window这样。毕竟，它不是浏览器。

解决此问题的最简单方法是使用vue-no-ssr之类的东西包装任何不应该预先渲染为html的东西。这个特定的库在服务器上呈现一个虚拟组件，然后在到达浏览器时实际上呈现该组件。

Answer 2

是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()可能会满足您的需要。有关更多信息，请参见this answer。

在nuxt js中未定义窗口

2 个答案: