尝试在 Vue 3/TypeScript/Quasar 中制作等高元素，但它并不总是有效

Question

在我的 Vue 3 / TypeScript / Quasar 应用程序中，我试图让 class 为 .plan-item 的所有元素具有匹配的高度。

为此，我使用以下代码：

const fixRowHeights = () => {
  // Find the tallest element
  let tallestHeight = 0;
  document.querySelectorAll('.plan-item').forEach((item) => {
    const height = item.clientHeight;
    if (height > tallestHeight) {
      tallestHeight = height;
    }
  });
  // Adjust the height of the elements
  document.querySelectorAll('.plan-item').forEach((item) => {
    item.setAttribute(
      'style',
      'min-height:' + tallestHeight.toString() + 'px;'
    );
  });
};

onMounted(() => {
  fixRowHeights();
});

有时，当我保存我的代码并在浏览器中预览时，代码可以正常工作。所有高度都一样。

但是我刷新页面后，它停止工作了。身高不一样了

为什么会这样？我该如何解决？

Answer 1

我通过将 min-height 更改为 height 来解决此问题。

不确定为什么会有帮助，但现在可以了。

尝试在 Vue 3/TypeScript/Quasar 中制作等高元素，但它并不总是有效

Trying to make equal height elements in Vue 3 / TypeScript / Quasar but it doesn't always work

typescript

vue.js

quasar-framework