How to display API data on a page using Vue js?

Question

Vue.js

Good afternoon, there is json data, with an api key, (20 objects) you need to display them on the page using Vue js
, I build the project via webpack, install axios via npm, write a get request with a promise. In the console I see the objects that need to be displayed on the page, how can I now correctly access them through the vue directives? In the template that I wrote, it displays only the name of the hits, totalhits, total array. I've looked all over and can't find an answer.

<template>
  <div class="hello">
    <div class="hits-container" v-for='(value, key) in hits'>
      <span class="left">{{ key }}</span>
      <span class="left">{{ key.comments }}</span>
      
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'hello',
  data: () => ({
    hits: [],
    errors: []
  }),

  created () {
    axios.get('https://pixabay.com/api/?key=2980920-46f1aa264b036ffc6e45ebad0&orientation=vertical&q=robot&min_height=500https://pixabay.com/api/?key=2980920-46f1aa264b036ffc6e45ebad0&orientation=vertical&q=robot&min_height=500')
    .then(responce => {
      this.hits = responce.data
      console.log(responce)
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Answer 1

hits[0]. previewHeight