I'm looking to customize the names fetched from an external API in my
<span>{{stats.team.name}}</span>Currently, the output displays full club names like:
Manchester City FC
Manchester United FC
Wolverhampton Wanderers FC
Instead, I would prefer shorter names like:
Man City
Man Utd
Wolves
Is there a straightforward way to achieve this?
This is how I have it set up in my HTML:
<div v-for="stats in tableStats" v-bind:key="stats.tableStats">
<span>{{stats.team.name}}</span>
</div>
This is the API Call script:
<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>
Here's a snippet of the JSON data retrieved:
"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
},