I want to rename the values I get from this external API in my `<span>{{stats.team.name}}</span`.

Right now it outputs every club name like this:

Manchester City FC  

Manchester United FC  

Wolverhampton Wanderers FC

I would like to make the name shorter and have it like this instead:

Man City  

Man Utd  

Wolves

Is it possible to do that in any simple way?

My HTML:

```
<div v-for="stats in tableStats" v-bind:key="stats.tableStats">
  <span>{{stats.team.name}}</span
</div>

```

API Call:

```
<script>

import axios from 'axios'

export default {

    data () {
    return {
      tableStats: null
    }
  },

    mounted () {
    axios.get('https://api.football-data.org/v2/competitions/PL/standings', {
        headers: {
            'X-Auth-Token': 'mytoken',
            "Content-Type": "application/json",
            }
    })
      .then(response => (this.tableStats = response.data.standings[0].table))
  }
}

</script>

```

JSON:

```
"table": [
            {
                "position": 1,
                "team": {
                    "id": 65,
                    "name": "Manchester City FC",
                },
                "playedGames": 19,
                "form": "W,W,W,W,W",
                "won": 12,
                "draw": 5,
                "lost": 2,
                "points": 41,
                "goalsFor": 36,
                "goalsAgainst": 13,
                "goalDifference": 23
            },

```