Vue3组合式API中异步函数判断元素类名失效问题求助

我正在使用Vue 3和Composition API，尝试根据异步函数的结果为div元素添加类名，但代码无法正常工作——类名会在函数执行完成前就被应用。

现有代码如下：
模板部分：

<div
  v-for="(image, index) in gallery.images"
  :key="index"
  :class="{ 'wide': isWide(image.thumb) }">
     <img
     @click="openLightbox(image.thumb)"
     :src="image.thumb"
     :alt="'image ' + (index + 1)"/>
</div>

Vue函数部分：

const isWide = async (imageUrl) => {
  return new Promise((resolve) => {
    const img = new Image();

    img.onload = () => {
      const aspectRatio = img.width / img.height;
      resolve(aspectRatio >= 1.5);
    };

    img.src = imageUrl;
  });
};

期望效果：当图片宽高比（width/height）≥1.5时，为div添加wide类，请问该如何修复？

问题核心是：你直接把异步函数isWide绑定到:class上，Vue会把Promise对象直接当作布尔值处理（Promise始终为真），导致类名被立刻加上，等异步操作完成时已经无法修正。

正确做法是提前预加载并缓存图片的宽高比状态，而非在模板中直接调用异步函数：

1. 创建缓存状态存储判断结果
   用ref创建一个对象，缓存每个图片URL对应的宽高比判断结果，避免重复加载：

import { ref, onMounted } from 'vue';

// 缓存图片是否为宽图，key是图片URL，value为布尔值
const isImageWide = ref({});

2. 预加载所有图片并计算宽高比
   组件挂载后，遍历所有图片URL，提前加载并判断宽高比，将结果存入缓存：

const gallery = ref({ /* 你的gallery数据 */ });

const checkImageAspectRatio = (imageUrl) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const isWide = img.width / img.height >= 1.5;
      isImageWide.value[imageUrl] = isWide;
      resolve(isWide);
    };
    // 处理图片加载失败的情况，默认设为非宽图
    img.onerror = () => {
      isImageWide.value[imageUrl] = false;
      resolve(false);
    };
    img.src = imageUrl;
  });
};

onMounted(async () => {
  // 并行加载所有图片，提升性能
  await Promise.all(
    gallery.value.images.map(img => checkImageAspectRatio(img.thumb))
  );
});

3. 模板中使用缓存结果
   把:class的判断改成直接读取缓存的状态，同时建议用唯一的图片URL作为key，替代不稳定的索引：

<div
  v-for="(image, index) in gallery.images"
  :key="image.thumb"
  :class="{ 'wide': isImageWide[image.thumb] }">
     <img
     @click="openLightbox(image.thumb)"
     :src="image.thumb"
     :alt="'image ' + (index + 1)"/>
</div>

4. 可选：添加加载状态
   如果图片加载耗时较长，可以添加加载提示避免页面闪烁：

const isLoading = ref(true);

onMounted(async () => {
  await Promise.all(
    gallery.value.images.map(img => checkImageAspectRatio(img.thumb))
  );
  isLoading.value = false;
});

模板中补充加载状态：

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else>
    <!-- 原图片列表代码 -->
  </div>
</template>

内容的提问来源于stack exchange，提问作者Hugh Herschell