title: VueJS Accessing JSON Data
body: <p>I am accessing data via an API I would like to display in a list. I am testing VueJS right now and have trouble displaying it properly.</p>
  
  <p>The data is:</p>
  
  <pre><code>{
  
    "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
    }
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="wrapper wrapper-content animated fadeInRight"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;div class="text-center m-t-lg"&gt;
                              &lt;h1&gt;MEDIFAKTOR server&lt;/h1&gt;
                          &lt;/div&gt;
  
                          &lt;div id="app"&gt;
                              &lt;ul class="list-group"&gt;
                                  &lt;li v-for="responder in responders"&gt;@{{ responder[0] }}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>VueJS:</p>
  
  <pre><code>var app = new Vue({
      el: '#app',
      data: {
          responders: []
      },
      mounted: function() {
          $.get('/api/v1/responders', function(data) {
              app.responders = data;
          })
  </code></pre>
  
  <p>I only want to display the "userReference" per list item.</p>