Simple Ripple DATA API Validator stats in Vue webpage

App.vue

<template>
  <div>
    Hi, this is {{ appName }}

    <hr />
    
    <div v-if="!validatorData.reports">
      Loading...
    </div>
    <div v-else>
      {{ validatorData.count }} reports;
      <br /><br />

      <table>
        <thead>
          <tr>
            <th>Date</th>
            <th>Ledgers</th>
            <th>Agreement</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="r in validatorData.reports" v-bind:key="r.date">
            <td>{{ new Date(Date.parse(r.date)).toString() }}</td>
            <td>{{ r.main_net_ledgers }}</td>
            <td>{{ r.main_net_agreement }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        appName: "SampleApp",
        validatorData: {}
      }
    },
    mounted () {
      window.fetch('https://data.ripple.com/v2/network/validators/nHUcQnmEbCNq4uhntFudzfrZV8P5WLoBrR5h3R9jAd621Aaz1pSy/reports').then(r => {
        return r.json()
      }).then(data => {
        // Set it to the Vue App data
        this.validatorData = data
      })
    }
  }
</script>

<style>
  * { font-family: Arial, monospace; }
</style>