时间戳

首页 > 解决方案 > Vue：用于检查未更新元素的 offsetHeight 的计算属性

javascript - Vue：用于检查未更新元素的 offsetHeight 的计算属性

问题描述

我有一个包含 50 个对象的数组的组件。

<template>
   <div v-for="(item,index) in items" ref="items" :key="index">
      //
   </div>

</template>

props: {
    items: {
      type: Array,
      required: true,
    },
}

我想items检查他们的道具，所以我做了一个计算属性，由他们offsetHeight抓住并首先通过返回它来测试它。itemsref

computed: {
  allItems() {
    const all = this.$refs.items;
    return all;
  }
}

在 VueTools 中，如果我在模板中HTMLDivElement使用 's的数组，它会按预期工作。allItemsitems

现在我想实施检查offsetHeight：

computed: {
  allItems() {
    const all = this.$refs.items;
    return all.filter(x => {
       x.offsetHeight > 300;
    })
  }
}

但这现在显示了计算属性，15因此它过滤了它们，但是当我更改窗口高度时，UI 中的 offsetHeight 会发生变化，但计算属性15无论如何都会显示。这不应该连续显示当前值吗？

标签： javascriptvue.jsvuejs2

解决方案

这不应该连续显示当前值吗？

不，因为HTMLElement.offsetHeight是 Vue 无法观察到的原生属性。在 Vue 不知情的情况下，浏览器可以随时更改元素的高度。您必须使用另一种方式来响应元素大小的变化，例如使用ResizeObserver或监听窗口调整大小事件。

Vue 2 的反应系统仅适用于普通对象。有关更多信息，请参阅深度反应。

推荐阅读