javascript - 如何使用 VueJS 滚动到 v-if 中的元素？

Question

在我的 Vue 3 项目中，我在一个组件中有这个按钮：

<template>
  <button type="button" class="btn btn-success" :data-id="product.id"
    v-on:click="hideButtonAndScroll(product.id)">Get Offer</button>

  <!-- ... some code here ... -->

  <offer-form :product="product"></offer-form>
</template>

<script>
export default {
  props: ['products'],
  data() {
    return { visibleFormId: 0 };
  },
  methods: {
    hideButtonAndScroll(id) {
      this.visibleFormId = id;
      window.scrollTo({
        top: document.getElementById('product-id-' + id).offsetTop,
        left: 0,
        behavior: 'smooth',
      });
    }
  },
}
</script>

在OfferForm.vue文件中，我有这个 HTML 代码：

<template>
  <div :id="'product-id-' + product.id">
    <!-- ... -->
  </div>
</template>

问题是当我调用该document.getElementById('product-id-' + id)函数时，实际上该元素还不存在。

有没有办法等到渲染完成？然后开始滚动？

Answer 1

您可以等到下一个渲染周期await this.$nextTick()来查看更改的任何副作用visibleFormId（使用async/await下面）：

export default {
  methods: {
  async hideButtonAndScroll(id) {
      this.visibleFormId = id;

    await this.$nextTick();

      window.scrollTo({
        top: document.getElementById('product-id-' + id).offsetTop,
        left: 0,
        behavior: "smooth",
      });
    },
  },
}

演示