Question

我目前正在使用Nuxt JS（Vue JS）建立房地产网站。我是整个API / JSON场景的新手，并且很难将特定的json项目/对象传递给视图。基本上，我具有以下JSON格式的属性列表：

{
  "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"
    }
}

我能够在主属性列表视图上成功显示此数据。我也成功地获得了它，以便它根据"id"编号（例如：'mysite.com/property/12'）生成一个不同的视图，主属性列表视图包含一个v-for循环，我指向该属性的链接如下：

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

这部分工作正常。主要问题在于生成的视图上，它显然没有每个属性的json文件，因此以下代码无法找到各个属性数据：

<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>

我实际上只是想为每个属性提取属性数据，例如：（属性ID：12）并在视图上显示，显然，它会根据json数据进行更新。我该如何修改？是否需要更改：

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

类似：

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

或者，我可以更改：

this.property = [response.body.data]

收件人：

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

问题是，我试图不使数据过于复杂，因为它一旦完成就本质上将来自API，而我现在只是生成伪造/虚拟数据。

非常感谢，如果有人可以提供代码示例或为我指明正确的方向。谢谢！

更新：

我可以做这样的事情吗？

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

或：

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

尝试将JSON数据传递到Vue JS中的特定视图

0 个答案: