Vue.js中v-for循环内Refs数据修改问题求助：图片适配类切换

看起来你遇到的核心问题是使用了全局的fit_choice变量来控制所有图片的类，但每个图片的宽高都是独立的，全局变量会导致所有图片共享同一个判断结果，这显然不符合你的需求。下面分两种场景给出针对性的解决方案：

场景1：图片宽高数据已存在于item中 #

如果你的user.photostream里的每个item已经包含InitialitemStreamWidth和InitialitemStreamHeight字段，那最简单的方式是直接在模板中根据当前item的属性判断，完全不需要全局变量：

<template>
<ul>
<li v-for="(item, i) in user.photostream" :key="i">
<picture class="fit_image">
<!-- 直接在模板中判断当前item的宽高 -->
<img 
  :class="{
    'fit_width': item.InitialitemStreamWidth > item.InitialitemStreamHeight,
    'fit_height': item.InitialitemStreamWidth <= item.InitialitemStreamHeight
  }" 
  :src="item.image"
/>
</picture>
</li>
</ul>
</template>

<script>
export default {
data: function () {
return {
  // 不再需要fit_choice全局变量
}
},
mounted () {
  // 这里无需额外处理
}
}
</script>

这种方式最直接高效，因为不需要额外的JS逻辑，Vue会在渲染每个item时自动判断并应用对应的类。

场景2：需要加载图片后获取实际宽高 #

如果item里没有预先提供宽高数据，必须等图片加载完成后获取实际的naturalWidth和naturalHeight，那我们可以给每个item添加一个专属的属性来存储判断结果，避免全局变量的冲突：

<template>
<ul>
<li v-for="(item, i) in user.photostream" :key="i">
<picture class="fit_image">
<img 
  :class="{
    'fit_width': item.fitType === 'Width',
    'fit_height': item.fitType === 'Height'
  }" 
  :ref="'imageStream_' + item.id" 
  :src="item.image"
/>
</picture>
</li>
</ul>
</template>

<script>
export default {
data: function () {
return {
  // 无需全局fit_choice
}
},
mounted () {
  this.user.photostream.forEach(item => {
    // 获取当前item对应的图片元素（Vue2中v-for的ref会被包装为数组，所以取[0]）
    const imgElement = this.$refs['imageStream_' + item.id]?.[0];
    if (!imgElement) return;

    // 处理图片已加载完成的情况
    if (imgElement.complete) {
      this.setFitType(item, imgElement);
    } else {
      // 监听图片加载完成事件
      imgElement.onload = () => {
        this.setFitType(item, imgElement);
      };
    }
  });
},
methods: {
  setFitType(item, img) {
    const { naturalWidth: width, naturalHeight: height } = img;
    // 给当前item添加专属的fitType属性
    item.fitType = width > height ? 'Width' : 'Height';
  }
}
}
</script>

关键说明： #

1. 为什么原来的方案无效？因为fit_choice是全局的响应式变量，当你在mounted中修改它时，所有图片都会绑定这个全局值，最终所有图片的类都会变成最后一次修改的结果，无法实现每个图片独立判断。
2. Vue2中v-for生成的动态ref会以数组形式存储在$refs中，所以需要用[0]来获取单个图片元素；如果是Vue3，推荐使用函数式ref来更精准地绑定每个元素。

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