Как вывести данные API на страницу через Vue js?

Question

[Synakten]

Добрый день, есть данные json, с ключом api, (20 объектов) нужно отобразить их на странице через Vue js
собираю проект через вебпак, устанавливаю axios через npm, пишу гет запрос с промисом. В консоли вижу объекты, которые нужно вывести на страницу, как к ним теперь правильно обратися через директивы vue? В темплейте, что прописал, отображает только название массива hits,totalhits,total. Все перекопал, ответа найти не могу.

<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>

Comments

[Evgeny Kulakov]

Покажите, что из себя объект hits представляет, когда вы его получаете

[Synakten]

это один объект из 20, вывел через постман для лучшей читаемости, (в консоли браузера тоже самое)

{
    "totalHits": 299,
    "hits": [
        {
            "previewHeight": 150,
            "likes": 31,
            "favorites": 31,
            "tags": "robot, android, artificial intelligence",
            "webformatHeight": 640,
            "views": 14413,
            "webformatWidth": 387,
            "previewWidth": 90,
            "comments": 2,
            "downloads": 2693,
            "pageURL": "https://pixabay.com/en/robot-android-148989/",
            "previewURL": "https://cdn.pixabay.com/photo/2013/07/12/14/54/robot-148989_150.png",
            "webformatURL": "https://pixabay.com/get/e831b90620fd1c2ad65a5854e4454e96ea75e2c818b4114697f9c478a3ec_640.png",
            "imageWidth": 1163,
            "user_id": 30363,
            "user": "OpenClipart-Vectors",
            "type": "vector/svg",
            "id": 148989,
            "userImageURL": "https://cdn.pixabay.com/user/2013/08/21/16-02-05-675_250x250.png",
            "imageHeight": 1920
        },

Answer 1

[hopeful_romantic]

hits[0]. previewHeight

Comments

[Synakten]

спс, получается))))