Trying to pass data from JSON to view

[sts-ryan-holton]

I'm currently building a properties website using Nuxt JS (Vue JS). I'm new to the whole API / JSON scene and am having difficulty in passing a specific json item/object to a view. Basically, I have a list of properties in the following JSON format:

{
  "data": [
    {
      "address": "1 some street, Bridgend, Bridgend, CF36 1ER",
      "price": "185000",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu laoreet ligula. Nullam urna velit, lobortis tristique vestibulum quis, congue et nunc. Nam suscipit nulla quis suscipit dictum.",
      "features": ["Stone", "solid", "is fluorescent green"],
      "sold": true,
      "type": "detached",
      "thumbnail": "http://placehold.it/400x400",
      "id": 12,
      "bedrooms": "Six"
    },
    {
      "address": "10 some street, Bridgend, Bridgend, CF36 1ER",
      "price": "50000",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu laoreet ligula. Nullam urna velit, lobortis tristique vestibulum quis, congue et nunc. Nam suscipit nulla quis suscipit dictum.",
      "features": ["Feature 1", "Feature 3", "Feature 4"],
      "sold": false,
      "type": "semi-detached",
      "thumbnail": "http://placehold.it/400x400",
      "id": 13,
      "bedrooms": "4"
    }
}

I am able to successfully show this data on a main property listing view. I have also successfully managed to get it so that it generates a different view based on the "id" number (e.g: 'mysite.com/property/12'), the main property listing view contains a v-for which loops over, and my link to the property is as follows:

<nuxt-link v-bind:to="'/property/' + property.id" class="btn btn-primary btn-sm" exact>{{ content.buttonText }}</nuxt-link>

This part works fine. The main problem is on the generated view it obviously doesn't have a json file for each property so the following code is unable to find the individual property data:

<template>
  <div>
    <section class="py-5">
      <div class="container">

        {{ property.address }}

      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: this.$route.params.id,
      property: []
    }
  },
  created() {
    this.$http.get('http://localhost:3000/properties/' + this.id + '.json').then(response => {
      // return data.json();
      this.property = [response.body.data]
    }, response => {
      // Error Callback
    });
  }
}
</script>

I'm essentially just trying to pull out the property data for each property, e.g: (property ID: 12) and display that on the view, obviously it would update depending on the json data. How could I modify this, do I need to change:

this.$http.get('http://localhost:3000/properties/' + this.id + '.json')

To something like:

this.$http.get('http://localhost:3000/properties/.json' + this.id)

Or, could I change:

this.property = [response.body.data]

To:

this.property = [response.body.data.id]

The problem is, I'm trying not to overcomplicate the data as it would essentially be coming from an API once complete, I'm just generating fake/dummy data for now.

Many thanks, if someone could provide a code example or point me in the right direction. Thanks!

UPDATE:

Could I maybe do something like this:

{{ property[12]['address'] }}

or:

{{ property[property.id]['address'] }}