如何从 Vue.js DOM 中获取刚刚移除的元素的高度

Question

• I have a list of items in Vue.js from index 0 to 49
• I show a subset of these items controlled by startIndex and endIndex
• When I increment startIndex to 1, items from 1-49 are shown, 0 is removed from DOM
• How to get height of 0 that was just removed
• Also how to get height of item that was just added if I edit the endIndex?

HTML

<script type="text/x-template" id="virtual-list">
  <div id="root" ref="root">
    <div id="viewport" ref="viewport">
      <div id="spacer" ref="spacer" :style="spacerStyle">
        <div v-for="i in visibleItems" :key="i.index" :id="i.index" class="list-item">
          {{i.value}}
  </div>
  </div>
  </div>
  </div>
</script>

<div id="app">
  <button @click="incrementStart">Start +</button>
  <button @click="decrementStart">Start -</button>
  <button @click="incrementEnd">End +</button>
  <button @click="decrementEnd">End -</button>
  <virtual-list></virtual-list>
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

#app {
  padding: 1.25rem;
}

#root {
  height: 50%;
  overflow-y: auto;
}

.list-item {
  padding: 0.75rem 0;
}

Vue.js

const PAGE_SIZE = 50;

const items = new Array(PAGE_SIZE).fill(null).map((item, index) => {
  return {
    id: faker.random.uuid(),
    index: index,
    value: "Item " + index + " " + faker.random.words(index % 25)
  };
});

const bus = new Vue({});

Vue.component("virtual-list", {
  template: "#virtual-list",
  data() {
    return {
      isMounted: false,
      items,
      startIndex: 0,
      endIndex: PAGE_SIZE,
      scrollTop: 0,
      translateY: 0,
      scrollDirection: 0
    };
  },
  computed: {
    visibleItems() {
      return this.items.slice(this.startIndex, this.endIndex);
    },
    /**
    Translate the spacer verticaly to keep the scrollbar intact
    We only show N items at a time so the scrollbar would get affected if we dont translate
    */
    spacerStyle() {
      return {
        willChange: "auto",
        transform: "translateY(" + this.translateY + "px)"
      };
    }
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$el.scrollTop;
      this.startIndex = Math.floor(this.scrollTop / 42);
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (newValue > oldValue) {
        this.scrollDirection = 1;
      } else if (newValue < oldValue) {
        this.scrollDirection = -1;
      }
    },
    startIndex(newValue, oldValue) {
      // console.log(this.$refs.spacer.children);
    }
  },
  beforeUpdate() {
    // console.log('before update', this.$refs.spacer.children);
  },
  mounted() {
    this.isMounted = true;
    const children = this.$refs.spacer.children;
    for (let i = 0; i < children.length; i++) {
      // console.log(children[i].offsetTop - this.$el.offsetTop);
      children[i].setAttribute("data-height", children[i].scrollHeight);
    }

    bus.$on("incrementStart", () => {
      this.startIndex++;
    });
    bus.$on("decrementStart", () => {
      this.startIndex--;
    });
    bus.$on("incrementEnd", () => {
      this.endIndex++;
    });
    bus.$on("decrementEnd", () => {
      this.endIndex--;
    });

    this.$el.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    this.$el.removeEventListener("scroll", this.handleScroll);
  }
});

new Vue({
  el: "#app",
  methods: {
    incrementStart() {
      bus.$emit("incrementStart");
    },
    decrementStart() {
      bus.$emit("decrementStart");
    },
    incrementEnd() {
      bus.$emit("incrementEnd");
    },
    decrementEnd() {
      bus.$emit("decrementEnd");
    }
  }
});

Answer 1

I think it's better to calculate height of container div of those children divs,

You can get height of the element using

element.getBoundingClientRect().height

To access element you can assign a ref to that div and accessing that div like

this.$refs.containerDiv.getBoundingClientRect().height

Afterwards, you can just compare between older value and new value to get how much it decreased / increased.