вложенный массив vuejs axios отображает данные в шаблоне - PullRequest
0 голосов
/ 21 октября 2019

Я пытаюсь получить данные из API, который имеет такой вывод -

Array
(
    [lastUpdate] => 1571616000
    [lanuage] => en
    [data] => Array
        (
            [0] => Array
                (
                    [itemId] => 1e3ac1f-6f1ddb0-583cac2-474acb6
                    [lastUpdate] => 1571616000
                    [store] => Array
                        (
                            [isFeatured] => 1
                            [isRefundable] => 1
                            [cost] => 500
                            [occurrences] => 0
                            [isNew] => 
                        )

                    [item] => Array
                        (
                            [name] => Dark Glyph
                            [description] => Indecipherable.
                            [type] => glider
                            [rarity] => uncommon
                            [costmeticId] => AthenaGlider:glider_id_083_darkbomber
                            [images] => Array
                                (
                                    [icon] => path.png
                                    [featured] => path.png
                                )

                            [backpack] => Array
                                (
                                )

                            [obtained_type] => vbucks
                            [ratings] => Array
                                (
                                    [avgStars] => 4.03
                                    [totalPoints] => 890
                                    [numberVotes] => 221
                                )

                        )

                )

В моем шаблоне Vue я пытаюсь получить результаты и отобразить каждый элемент [0] => Array с соответствующимзначения, такие как

[item] => Array 
(
    [name] => Dark Glyph

В настоящее время мой шаблон выглядит как -

<template>
<div>
<h1>testing</h1>

<div v-for="result in results">

<div v-for="(value,index) in result.data">
<div>{{ value[index].name }}</div>
</div>

</div>


</div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
    return {
      results: [],
      errors: []
    }
  },

  // Fetches posts when the component is created.
  created() {
    axios.get('https://api-path.com/store/get')
      .then(response => {
this.results = response.data
})

    .catch(e => {
      this.errors.push(e)
    })
  }
  }
</script>

Однако ничего не работает, в большинстве случаев я могу отобразить весь вывод, используя {{ results }}. Что я делаю не так?

РЕДАКТИРОВАТЬ

<template>
<div v-for="parentItem in results.data">
{{ parentItem.item.name }}
</div>
</template>


<script>
import axios from 'axios';

export default {
 data() {
    return {
      results: [],
      errors: []
    }
  },

  // Fetches posts when the component is created.
  created() {
    axios.get('https://api-path/get')
      .then(response => {
this.results = response.data
})

    .catch(e => {
      this.errors.push(e)
    })
  }
  }
</script>

Когда я ввожу URL-адрес API в браузере, это ответ, который я получаю -

{"lanuage":"en","lastupdate":1571702400,"vbucks":"https://PATH.com/vbucks-icon.png","date_layout":"day-month-year","date":"22-10-19","rows":17,"items":[{"itemid":"974905b-35b2c4f-233d523-e8468a8","name":"Hang Time","cost":"1200","featured":1,"refundable":1,"lastupdate":1571702400,"item":{"name":"Hang Time","description":null,"captial":"glider","type":"glider","rarity":"epic","obtained_type":"vbucks","image":"https://PATH.com/glider/a314a7393656af51e4f781769438900f.png","images":{"transparent":"https://PATH.com/glider/a314a7393656af51e4f781769438900f.png","background":"https://PATH.com/image/974905b-35b2c4f-233d523-e8468a8.png","information":"https://PATH.com/image/974905b-35b2c4f-233d523-e8468a8/item.png","featured":{"transparent":"https://PATH.com/featured/974905b-35b2c4f-233d523-e8468a8.png"}}},"ratings":{"avgStars":4.03,"totalPoints":411,"numberVotes":102}},{"itemid":"ff22a73-c0b7b7f-9d20162-34fa19c","name":"Jumpshot","cost":"1200","featured":1,"refundable":1,"lastupdate":1571702400,"item":{"name":

1 Ответ

0 голосов
/ 21 октября 2019

new Vue({
  el: '#app',
  data() {
    return {
      json: {lastUpdate: 1571616000, language: 'en', data: [ { itemId: '1e3ac1f-6f1ddb0-583cac2-474acb6', item: {name: 'Dark'} } ]}
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="parentItem in json.data">
    {{parentItem.item.name}}
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...