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 响应中访问包含连字符的数据? [复制]