Vuejs API indented
I’m trying to display some information from RAWG.io API (https://api.rawg.io/api/games) but some of them are indented so the output is not what I want (for example in game genres). My code is
<template> <div> <v-container fluid v-if="game !== null"> <v-row class="frist"> <v-col class="title"> <h1>{{game.name}}</h1> </v-col> <v-col class="info"> <p>{{game.genres}}</p> </<-col> </v-row> </div> </template> <script> import Vue from "vue"; import axios from "axios"; import VueAxios from "vue-axios"; Vue.use(VueAxios, axios); export default { name: "game", data() { return { gameId: this.$route.params.gameId, title: "game", game: null }; }, mounted() { Vue.axios .get("https://api.rawg.io/api/games/" + this.gameId) .then(resp => { this.game = resp.data; console.log(resp.data); console.warn(resp.data.results); }) .catch(error => { console.log(error); }); } }; </script>
{{game.genres}}
returns:
[ { "id": 4, "name": "Action", "slug": "action", "games_count": 93639, "image_background": "https://media.rawg.io/media/games/84d/84da2ac3fdfc6507807a1808595afb12.jpg" }, { "id": 3, "name": "Adventure", "slug": "adventure", "games_count": 64820, "image_background": "https://media.rawg.io/media/games/4be/4be6a6ad0364751a96229c56bf69be59.jpg" } ]
How do I display only “name” in the genres attribute?
Answer
A simple approach would be to use a mapped, computed property:
<!-- ... --> <v-col class="info"> <p>{{genreNames}}</p> </v-col> <!-- ... --> <script> // ... just posting the important parts export default { // ... computed: { genreNames() { return this.game.genres.map(({ name }) => name).join(' ') // join the names with a space } } } </script>