Vue项目切换产品后imgBlocks变量未更新的问题求助

点击推荐产品触发navigateAndChange跳转后，新产品页面的最后一张图片无法添加active类。原因是原代码直接操作DOM元素数组imgBlocks，切换产品时DOM尚未更新，导致imgBlocks仍存储旧产品的元素，无法正确给新产品图片添加样式。

解决方案 #

放弃直接操作DOM的方式，改用Vue的响应式数据驱动来控制active类，确保产品切换时样式自动更新：

修改步骤

1. 新增响应式变量跟踪当前激活的图片索引
2. 模板中用动态类绑定替代手动操作classList
3. 监听product变化，自动将最后一张图片设为激活状态
4. 简化图片切换逻辑，移除所有DOM操作代码

修改后的完整代码

<script setup>
import { computed, ref, watch } from "vue";
import { useProductStore } from "../stores/store.js";
import { useRouter, RouterLink } from "vue-router";
import btn from "./btn.vue";
import orderBtn from "./orderBtn.vue";

const router = useRouter();
const productStore = useProductStore();
const product = computed(() => productStore.getProduct);
const extraProducts = computed(() => productStore.getExtraProducts);

// 响应式变量：跟踪当前显示的主图
const activeImg = ref('');
// 响应式变量：跟踪当前激活的图片索引，用于控制active类
const activeImgIndex = ref(-1);

// 监听product变化，产品切换时自动设置最后一张图片为激活状态
watch(product, (newProduct) => {
  if (newProduct?.images?.length) {
    const lastIndex = newProduct.images.length - 1;
    activeImg.value = newProduct.images[lastIndex];
    activeImgIndex.value = lastIndex;
  }
}, { immediate: true });

// 图片切换逻辑：仅更新响应式变量，由Vue自动同步样式
function changeImg(img, index) {
  activeImg.value = img;
  activeImgIndex.value = index;
}

// 产品切换逻辑
function changeProduct(extraProduct) {
  productStore.id = extraProduct.id;
  localStorage.setItem("productStore", JSON.stringify(productStore));
}

function navigateAndChange(extraProduct) {
  router.push(`/productCard/${extraProduct.id}`);
  changeProduct(extraProduct);
}

// 保留原有业务函数（decrease/increase/likeProduct/addOrDeleteProduct）
</script>

<template>
  <div>
    <section class="container products">
      <div class="products__info">
        <div class="products__info-img">
          <div class="img-gallery">
            <!-- 用动态类绑定自动控制active状态 -->
            <div 
              class="img-good" 
              v-for="(image, index) in product.images" 
              :key="index"
              @click="changeImg(image, index)"
              :class="{ active: activeImgIndex === index }"
            >
              <img :src="image" alt="">
            </div>
          </div>
          <img :src="activeImg" alt="" class="main-img" />
        </div>
        <div class="products__info-description">
          <h3>{{ product.title }}</h3>
          <p>$ {{ product.price }}</p>
          <h4>Product description</h4>
          <p class="description">{{ product.description }}</p>
          <div class="products-order">
            <div class="order-btns">
              <orderBtn text="-" @click="decrease(product)"></orderBtn>
              <div class="ordered-quantity">
                {{ product.amount > 0 ? product.amount : 0 }}
              </div>
              <orderBtn text="+" @click="increase(product)"></orderBtn>
            </div>
            <RouterLink :to="`/shoppingCart`">
              <btn text="Buy NOW"></btn>
            </RouterLink>
            <div class="icon-like" @click="likeProduct($event, product)" :class="{ active: product.liked == true }"></div>
          </div>
        </div>
      </div>
      <div class="products__extra">
        <h2>You may be interested in</h2>
        <div class="products__extra-content">
          <div class="extra__item" v-for="extraProduct in extraProducts" :key="extraProduct.id">
            <div class="extra__item-img">
              <RouterLink :to="`/productCard/${extraProduct.id}`" @click="navigateAndChange(extraProduct)"></RouterLink>
              <img :src="extraProduct.thumbnail" alt="" />
              <div class="icons">
                <div class="icon-cart" @click="addOrDeleteProduct(extraProduct)" :class="{ active: extraProduct.amount }"></div>
                <div class="icon-like" @click="likeProduct($event, extraProduct)" :class="{ active: extraProduct.liked == true }"></div>
              </div>
              <h5>{{ Math.ceil(extraProduct.discountPercentage) }} % OFF</h5>
            </div>
            <div class="extra__item-description">
              <h4>{{ extraProduct.title }}</h4>
              <p>$ {{ extraProduct.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

关键改进点

• 响应式驱动样式：用activeImgIndex跟踪激活状态，模板通过:class自动绑定样式，完全脱离DOM操作，避免新旧DOM混淆问题。
• 自动监听产品切换：通过watch监听product变化，产品更新时自动将最后一张图片设为激活状态，无需依赖不可靠的setTimeout。
• 代码简化：移除所有document.querySelectorAll和classList操作，逻辑更清晰，符合Vue数据驱动的设计理念。

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