VueJS访问JSON数据

我通过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>

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

您必须迭代responders.data，因为它是您必须循环的数组，然后您可以访问userReference，如：{{responder.userReference}}。您应该能够像下面这样做：

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

您必须迭代responders.data，因为它是您必须循环的数组，然后您可以只访问userReference，如：{{responder.userReference}}。您应该能够像下面这样做：

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

---

美好的现在我明白了，看起来很简单美好的现在我明白了，看起来很简单