Vue.js - gistpad - display local police info

index.html

<div id="app">
    <h2>Police data for Oxfordshire</h2>
    <p>Using data from <a href="https://data.police.uk/docs/method/crime-street/">https://data.police.uk/docs/method/crime-street/</a></p>
    <p>Built using <a href="https://vuejs.org/">vue.js</a> and <a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs">gistpad</a></p>
    <p>Dataset source <a href="https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915">https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915</a></p>
    <p>Sample data: <a href="sample.json">sample.json</a></p>
    <button @click="clearData">Clear data</button>
    <button @click="loadData">Fetch data</button>
    <hr>
    <div id="records" v-for="record in records" key="record.id">
        <p>[{{record.month}}] | {{record.category}} | {{record.location.street.name}}<span v-if="record.outcome_status != null">| {{record.outcome_status}}</span> </p>
    </div>
</div>

playground.json

{
  "scripts": [
    "vue"
  ],
  "styles": []
}

sample.json

{
  "category": "anti-social-behaviour",
  "location_type": "Force",
  "location": {
    "latitude": "51.719096",
    "street": {
      "id": 1203394,
      "name": "On or near Sandford Road"
    },
    "longitude": "-1.226888"
  },
  "context": "",
  "outcome_status": null,
  "persistent_id": "29aeed65681bccac93e634feb0db6ffc6b573fdf8ec60a0c71a8656bf9e8aba5",
  "id": 79154174,
  "location_subtype": "",
  "month": "2019-11"
}

script.js

new Vue({
    el: "#app",
    data: {
        records : []
    },
    methods: {
        async loadData() {
            console.clear();
            const json = await this.fetchData();
            this.records = json;
            console.log(this.records[0]);
        },
        async fetchData() {
            const response = await fetch("https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915");
            const json = response.json();
            return json;
        },
        clearData() {
            console.clear();
            const records = document.getElementById("records");
            if(records) {
                records.innerHTML = "";
            }
        }
    }
});

style.css

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eee
}