使用v-for循环动态生成图片URL时出现GET请求错误的问题

嘿，我来帮你排查这个问题！看起来你在通过v-for循环渲染英雄联盟道具图片时，遇到了属性值变成undefined导致URL错误的情况，下面拆解可能的原因和对应的解决办法：

最可能的原因：动态属性访问写法错误 #

你提到遍历1-6并减1得到0-5来对应item0到item5，但如果你的属性访问方式不对，就会直接拿到undefined。比如很多人会犯这样的错误：

// 错误写法：直接用 .item 拼接数字，itemObj.item 本身不存在，返回undefined
<img v-for="i in 6" :src="`http://ddragon.leagueoflegends.com/cdn/9.16.1/img/item/${itemObj.item + (i-1)}.png`" />

这时候itemObj.item是不存在的属性，返回undefined，和(i-1)拼接后就会变成undefined4这类错误字符串，导致你看到的403错误。

正确的写法：使用括号语法访问动态属性 #

Vue中访问对象的动态属性，需要用对象['属性名字符串']的形式。你需要先拼接出完整的属性名（比如item0、item1），再通过括号语法获取对应值：

// 正确写法：拼接属性名字符串，用括号访问
<img 
  v-for="i in 6" 
  :key="i" 
  :src="`http://ddragon.leagueoflegends.com/cdn/9.16.1/img/item/${itemObj['item' + (i-1)]}.png`" 
/>

这里'item' + (i-1)会生成item0到item5的字符串，再通过itemObj[属性名]就能正确拿到每个道具的ID值了。

其他需要排查的点 #

• 确认对象属性是否存在：在控制台打印你的对象，检查是否真的有item0到item5这六个属性，且每个属性值都是有效的道具ID（比如3001这类字符串/数字）：

  console.log(你的对象名); // 检查属性和对应值
  

• 循环范围是否正确：v-for="i in 6"会生成1到6的循环值，减1后正好是0-5，这个逻辑没问题，但如果不小心写成v-for="i of 6"或者循环了错误的数组，也可能导致索引异常。
• 添加v-for的key属性：这是Vue的强制要求，能避免列表渲染时的性能问题和错误，记得给每个img标签加上:key="i"或者更唯一的标识。

按照上面的方法调整后，应该就能正确生成图片URL，加载英雄联盟的道具图片了。

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