Question

我正在尝试从具有此类输出的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>

当我在浏览器中输入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":

Answer 1

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>

vuejs axios api嵌套数组在模板中显示数据

1 个答案: