title: Targeting last item in v-repeat with Vue JS
body: <p>I have a v-repeat list of items that are pulled from json.</p>
  
  <p>I want to target the last item in the list to change its class.</p>
  
  <p>How would I do this? My code is below...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
  ...
              &lt;ul id="menu"&gt;
                  &lt;li v-repeat="items"&gt;
                      &lt;i class="material-icons"&gt;{{ icon }}&lt;/i&gt;
                      {{ name }}
                  &lt;/li&gt;
              &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var apiUrl = 'inc/menu.json.php'
  
  new Vue({
      el: '#app',
      data: {
          active: true,
          items: []
      },
      ready: function(){
          this.fetchData()
      },
      methods: {
          toggle: function () {
              this.active = !this.active;
          },
          fetchData: function(){
              var xhr = new XMLHttpRequest(),
                  self = this
              xhr.open('GET', apiUrl)
              xhr.onload = function () {
                  self.items = JSON.parse(xhr.responseText)
              }
              xhr.send()
          }
      }
  });
  </code></pre>