title: How to display JSON data from API with VUE
body: <p>How can I display the names of the pokemon that I get from this Pokeapi: <a href="https://pokeapi.co/" rel="nofollow noreferrer">https://pokeapi.co/</a></p>
  
  <pre><code>&lt;template&gt;
  
  &lt;div id="app"&gt;
      &lt;div v-for="name in info"&gt;
          &lt;span &gt;{{ name }}&lt;/span&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;/template&gt; 
  
  &lt;script&gt;
      export default {
      el: '#app',
  
      data () {
          return {
              info: [],
              loading: true,
              errored: false
          }
      },
  
      mounted () {
          axios
  
          .get('https://pokeapi.co/api/v2/pokemon/')
  
          .then(response =&gt; {
              this.info = response.data.results
          })
  
          .catch(error =&gt; {
              console.log(error)
              this.errored = true
          })
  
          .finally(() =&gt; this.loading = false)
      }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect to be able to display for example the name bulbasaur and the url that is givin within the API.</p>
  
  <p>Currently this is displaying:</p>
  
  <pre><code>{ "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" }
  { "name": "ivysaur", "url": "https://pokeapi.co/api/v2/pokemon/2/" }
  { "name": "venusaur", "url": "https://pokeapi.co/api/v2/pokemon/3/" }
  { "name": "charmander", "url": "https://pokeapi.co/api/v2/pokemon/4/" }
  </code></pre>