Vue 3项目中如何根据MMR值条件渲染不同等级图片？

我的项目基于 Vue 3、Vuetify、Vite 构建，部署在 Vercel 平台，需求是根据给定的 MMR 值条件渲染不同的等级图片（Rank Logo），图片存放路径正确，当前编写的代码如下：

<template>
  ...
  <v-img
    contain
    :src="userinfo.threesRankImage"
  />
  ...
</template>

<script>
...
data: () => ({
  userinfo: {
    ...
    threesMMR: 1000,
    threesRankImage: this.threesMMRToRankImage(this.userinfo.threesMMR),
    ...
  },
}),
methods: {
  threesMMRToRankImage(mmr) {
    ...
  } else if (mmr < 1100) {
    return '@/assets/newRankLogos/0.png';
  }
  ...
}
</script>

问题分析 #

当前代码存在两个关键问题：

1. data 使用箭头函数，导致 this 不指向 Vue 组件实例，无法调用 threesMMRToRankImage 方法
2. 在 data 初始化阶段直接调用方法赋值，此时 userinfo.threesMMR 的响应式依赖未建立，无法实现值变化时自动更新图片

修复方案 #

方案一：使用计算属性（推荐）

计算属性会自动响应 threesMMR 的变化，动态返回对应图片路径：

<template>
  ...
  <v-img
    contain
    :src="threesRankImage"
  />
  ...
</template>

<script>
...
data: () => ({
  userinfo: {
    ...
    threesMMR: 1000,
    ...
  },
}),
computed: {
  threesRankImage() {
    return this.threesMMRToRankImage(this.userinfo.threesMMR);
  }
},
methods: {
  threesMMRToRankImage(mmr) {
    // 补充完整条件判断逻辑示例
    if (mmr >= 2000) {
      return '@/assets/newRankLogos/5.png';
    } else if (mmr >= 1800) {
      return '@/assets/newRankLogos/4.png';
    } else if (mmr >= 1500) {
      return '@/assets/newRankLogos/3.png';
    } else if (mmr >= 1200) {
      return '@/assets/newRankLogos/2.png';
    } else if (mmr >= 1100) {
      return '@/assets/newRankLogos/1.png';
    } else {
      return '@/assets/newRankLogos/0.png';
    }
  }
}
</script>

方案二：在 created 钩子初始化+监听 MMR 变化

若需保留 userinfo 内的属性，可在组件创建后赋值，并通过监听实现响应式更新：

<template>
  ...
  <v-img
    contain
    :src="userinfo.threesRankImage"
  />
  ...
</template>

<script>
...
data() { // 改用普通函数，确保this指向组件实例
  return {
    userinfo: {
      ...
      threesMMR: 1000,
      threesRankImage: '',
      ...
    },
  }
},
created() {
  // 初始化图片路径
  this.userinfo.threesRankImage = this.threesMMRToRankImage(this.userinfo.threesMMR);
},
watch: {
  'userinfo.threesMMR'(newMMR) {
    // MMR变化时更新图片
    this.userinfo.threesRankImage = this.threesMMRToRankImage(newMMR);
  }
},
methods: {
  threesMMRToRankImage(mmr) {
    ...
    } else if (mmr < 1100) {
      return '@/assets/newRankLogos/0.png';
    }
    ...
  }
}
</script>

额外配置说明 #

Vite 中使用 @ 作为 src 目录别名，需确保 vite.config.js 已配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

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