VueJS 访问 JSON 数据

Posted

技术标签:

【中文标题】VueJS 访问 JSON 数据【英文标题】:VueJS Accessing JSON Data 【发布时间】:2017-06-22 12:47:31 【问题描述】:

我正在通过要在列表中显示的 API 访问数据。我现在正在测试 VueJS,但无法正确显示它。

数据是:



  "data": [
    
      "userReference": "R100",
      "responderStatus": 0,
      "location": 
        "latitude": 100,
        "longitude": 100,
        "distance": null
      ,
      "featureTypeId": 1
    
  ],
  "pagination": 
    "total": 1,
    "perPage": 10,
    "lastPage": 1,
    "nextPageUrl": null,
    "prevPageUrl": null,
    "from": 1,
    "to": 1,
    "totalPages": 1,
    "currentPage": 1,
    "hasMorePages": false
  

html

<div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center m-t-lg">
                            <h1>MEDIFAKTOR server</h1>
                        </div>

                        <div id="app">
                            <ul class="list-group">
                                <li v-for="responder in responders">@ responder[0] </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>

VueJS:

var app = new Vue(
    el: '#app',
    data: 
        responders: []
    ,
    mounted: function() 
        $.get('/api/v1/responders', function(data) 
            app.responders = data;
        )

我只想显示每个列表项的“userReference”。

【问题讨论】:

【参考方案1】:

您必须遍历 responders.data,因为它是您必须循环的数组,而您只能访问 userReference,例如:responder.userReference 。你应该可以这样做:

<div id="app">
    <ul class="list-group">
        <li v-for="responder in responders.data"> responder.userReference </li>
    </ul>
</div>

【讨论】:

不错!!现在我明白了,看起来很容易! :)

以上是关于VueJS 访问 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vuejs 中访问具有 Axios 令牌的 API?

我们如何从 JSON 响应中访问包含连字符的数据? [复制]

在 vuejs 中不使用导入使 JSON 从页面可见

如何在 Vue 和 Axios 中循环访问 API 端点 JSON 对象?

VueJS 访问嵌套组件数据值

无法访问手表处理程序 vuejs 中的数据变量