Vue-Cropper切换q-select选项后旋转错误图片问题求助

切换q-select选项时图片渲染正常，rotateImage函数中打印的index值正确，但点击对应index的旋转按钮时，会旋转数组中错误的图片。应用启动时功能正常，切换选项后出现该问题。

代码片段 #

<q-select
  dense
  borderless
  filled
  style="max-width: 35%"
  v-model="selection"
  :options="Options"
/>
<div
  v-for="(imageData, index) in selection"
  :key="`${selection}-${index}`"
>
  <vue-cropper
    ref="cropper"
    :src="imageData"
    :cropBoxMovable="false"
    :zoomable="true"
    @cropend=".."
  />
  <q-menu touch-position>
    <q-list style="min-width: 100px">
      <q-item @click="rotateImage(index)" clickable v-close-popup>
        <q-item-section>Rotate</q-item-section>
      </q-item>
      <q-item clickable v-close-popup>
        <q-item-section>Close</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</div>

<script setup>
// ...
const rotateImage = async (index) => {
  const cropperInstance = cropper.value[index];
  cropperInstance.clear();
  cropperInstance.initCrop();
  cropperInstance.rotate(90);
};
</script>

解决方案 #

问题根源在于v-for的key值设计不合理，导致Vue复用了旧的组件实例，ref数组没有同步更新到新的图片组：

1. 修正v-for的key值
   当前的key="${selection}-${index}"会因为selection是数组，转成字符串后可能重复，导致Vue无法正确区分不同的图片项，进而复用旧的<vue-cropper>组件。将key改为与每个图片绑定的唯一标识：

   <div
     v-for="(imageData, index) in selection"
     :key="imageData" <!-- 若imageData是唯一URL/路径则直接用；若有唯一ID则用imageData.id -->
   >
   

   如果存在重复的imageData（比如同一张图在不同组出现），可以结合index生成唯一key：

   :key="`${imageData}-${index}`"
   

2. 确保ref数组同步更新
   正确的key会让Vue在切换selection时，销毁旧的<vue-cropper>组件并创建新实例，此时cropper.value数组会自动更新为当前图片组对应的组件实例，index就能正确匹配到目标图片。

经过以上修改，切换图片组后点击旋转按钮，就能正确操作对应图片了。

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