frontend/src/views/UserAwards.vue

<template>
  <main>
    <div class="columns">
      <div class="column is-4" v-for='(award) in awards' :key='"award-" + award.id'>
        <div class="box">
          <b-tag v-if="award.Award.rarity === 'Common'">{{award.Award.rarity}}</b-tag>
          <b-tag v-if="award.Award.rarity === 'Uncommon'">{{award.Award.rarity}}</b-tag>
          <b-tag v-if="award.Award.rarity === 'Rare'" class="is-warning">{{award.Award.rarity}}</b-tag>
          <b-tag v-if="award.Award.rarity === 'Extremely Rare'" class="is-danger">{{award.Award.rarity}}</b-tag>
          <b-tag v-if="award.Award.rarity === 'Impossible'" class="is-danger">{{award.Award.rarity}}</b-tag><br>
          <b-tooltip :label="award.Award.description"><h1 class="subtitle">{{award.Award.name}} &nbsp;<i class="fas fa-info-circle"></i></h1></b-tooltip><br>
          <img :src="'https://cdn.kaverti.com/awards/icon/' + award.Award.icon + '.png'">
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import AjaxErrorHandler from "../../assets/js/errorHandler";

export default {
  name: 'UserAwards',
  props: ['username'],
  data() {
    return {
      awards: []
    }
  },
  mounted() {
    this.axios
        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?awards=true`)
        .then(res => {
          this.awards = res.data
        })
        .catch(e => {
          let invalidId = e.response.data.errors.find(error => {
            return error.name === 'accountDoesNotExist'
          })

          if (invalidId) {
            this.$store.commit('set404Page', true)
          } else {
            AjaxErrorHandler(this.$store)(e)
          }
        })
  }
}
</script>