VueJS JSONデータへのアクセス

Question

私はリストに表示したい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" を表示します。

Answer 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>