【问题标题】:vuejs axios api nested array display data in templatevuejs axios api嵌套数组在模板中显示数据
【发布时间】:2020-02-17 22:01:58
【问题描述】:

我正在尝试从具有这样输出的 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 url 时,这是我得到的响应 -

{"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":

【问题讨论】:

  • 这是实际的 API 响应吗?它看起来像 PHP 的 print_r() 的输出,它不可移植。如果 API 响应 JSON 就更好了

标签: arrays api vue.js multidimensional-array axios


【解决方案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>

【讨论】:

  • 嗨我试过你的答案,但我什么也没得到。我已经用我当前的设置更新了我的代码。使用您的 EXACT 代码,我得到了上面显示的结果,但是使用我的原始代码/api url 尝试它,我没有得到任何输出。
猜你喜欢
  • 2016-06-03
  • 2019-05-06
  • 2019-01-08
  • 1970-01-01
  • 2022-01-24
  • 2020-07-24
  • 1970-01-01
  • 1970-01-01
  • 2022-09-27
相关资源
最近更新 更多