我怎样才能显示以下数据是vue js？

时间：2018-01-08 20:26:24

标签： javascript vue.js vue-component

我的json回复是

{"status": true, "data": {"basic": {"name": "haji", "dob": "2018-01-01", "gender": "male", "created_at": "2018-01-08T13:38:49.767Z", "firstname": "Ah", "lastname": "Sh", "userType": "Agent", "actor": 1, "username": "ashu", "contact": {"email": "ah@gmail.com", "phone": 863249517, "address": null}, "is_new": false, "is_email_verified": true, "is_phone_verified": true}, "wallet": {"amount": 144.0, "tds": 6.0}, "clan": null, "balance_lisitings": 48, "clan_status": false, "listings": [{"pid": 36, "name": "Labs", "website": "Labs", "category": {"name": "Education"}, "location": {"lat": 9.52766533190131, "lon":
76.8221354484558, "state": "Kerala", "country": "India", "district": {"id": 1, "name": "Kottayam"}, "city": {"id": 1, "name": "Kanjirappally"}, "place": {"id": 1, "name": "Koovappally"}}, "package": 0, "contact": {"email": "ah@gmail.com", "phone": 8986234851, "address": {"country": "India", "state": "Kerala", "name": "aloh", "pincode": 686895, "streetAddress": "Kottayam\nKanjirappally", "locality": "Koovappally", "city": "Koovappally"}}, "about": " IT company."}, {"pid": 37, "name": " Louis", "website": "ouis", "category": {"name": "Education"}, "location": {"lat": 10.0273434437709, "lon": 76.5288734436035, "state": "Kerala", "country": "India", "district": {"id": 1, "name": "Kottayam"}, "city": {"id": 1, "name": "Kanjirappally"}, "place": {"id": 1, "name": "Koovappally"}}, "package": 0, "contact": {"email": "soew988@gmail.com", "phone": 989756240, "address": {"country": "India", "state": "Kerala", "name": "allen45", "pincode": 686518, "streetAddress": "Sppally", "locality": "Koovappally", "city": "Koovappally"}}, "about": "fsdbgfnvb cvc"}], "total_listings": 2}}

=============================================== =========================

我的vue js脚本是

<script>
  new Vue({
  el: '#listings' ,
  data: {
     data: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      $.ajax({
            url: "https://",
            method: "GET",
            dataType: "JSON",
            success: function (e) {

                    self.data = e.data;

            },
        });
    })
  },

})

</script>

我的HTML代码是

<div id="listings">
<h1>{{basic.name}}</h1>
<h2>{{basic.dob}}</h2>
like wise all data
</div>

任何人都可以帮我展示一样。我在js中很弱。这是我得到的数据，我需要在vue js中显示上述数据。我将所有数据存储到变量data []。从中，我怎样才能显示相同的内容？

2 个答案:

答案 0 :(得分：1)

{{和}}之间的模板中提供了嵌套在数据（和计算）属性中的任何数据标签。

例如：

Vue.element('my-element', {
    template:
      '<h1>This is an example!</h1>' +
      '<h2>{{ msg }}</h2>'

    data: function () {
      return {
        msg: 'default message'
    }
},

因此，在您的情况下，使用嵌套属性与在javascript中访问它们完全相同：

Vue.element('my-element', {
    template:
      '<h1>This is an example!</h1>' +
      '<h2>{{ data.wallet.amount }}</h2>'
      '<h2 v-for="listing in listings" :key="listing.pid">{{ listing.name }}</h2>'
    }

    data: function () {
      return {
        data: []
    }
},

注意

数据对象应该从原始文档中的函数返回：

定义组件时，必须将数据声明为返回初始数据对象的函数，因为将使用相同的定义创建许多实例。如果我们使用普通对象作为数据，那么同一个对象将在所有创建的实例之间通过引用共享！通过提供数据功能，每次创建新实例时，我们都可以调用它来返回初始数据的新副本。（https://vuejs.org/v2/api/#data）

进一步阅读

我建议你阅读Vue指南，特别是有关的部分 Declarative Rendering，Conditionals and Loops和 Template Syntax

修改

在我写答案时，我看到你编辑了你的问题。

将您的HTML更改为：

<div id="listings">
<h1>{{data.basic.name}}</h1>
<h2>{{data.basic.dob}}</h2>
like wise all data
</div>

答案 1 :(得分：1)

您需要的一件事是v-if，以便在没有数据时防止渲染。

您有一个data变量，其中包含basic。正如你所拥有的那样，你想要包含的所有东西都在其中，所以你会有很多东西，比如data.basic.name。

const e = {
  "status": true,
  "data": {
    "basic": {
      "name": "haji",
      "dob": "2018-01-01",
      "gender": "male",
      "created_at": "2018-01-08T13:38:49.767Z",
      "firstname": "Ah",
      "lastname": "Sh",
      "userType": "Agent",
      "actor": 1,
      "username": "ashu",
      "contact": {
        "email": "ah@gmail.com",
        "phone": 863249517,
        "address": null
      },
      "is_new": false,
      "is_email_verified": true,
      "is_phone_verified": true
    },
    "wallet": {
      "amount": 144.0,
      "tds": 6.0
    },
    "clan": null,
    "balance_lisitings": 48,
    "clan_status": false,
    "listings": [{
      "pid": 36,
      "name": "Labs",
      "website": "Labs",
      "category": {
        "name": "Education"
      },
      "location": {
        "lat": 9.52766533190131,
        "lon": 76.8221354484558,
        "state": "Kerala",
        "country": "India",
        "district": {
          "id": 1,
          "name": "Kottayam"
        },
        "city": {
          "id": 1,
          "name": "Kanjirappally"
        },
        "place": {
          "id": 1,
          "name": "Koovappally"
        }
      },
      "package": 0,
      "contact": {
        "email": "ah@gmail.com",
        "phone": 8986234851,
        "address": {
          "country": "India",
          "state": "Kerala",
          "name": "aloh",
          "pincode": 686895,
          "streetAddress": "Kottayam\nKanjirappally",
          "locality": "Koovappally",
          "city": "Koovappally"
        }
      },
      "about": " IT company."
    }, {
      "pid": 37,
      "name": " Louis",
      "website": "ouis",
      "category": {
        "name": "Education"
      },
      "location": {
        "lat": 10.0273434437709,
        "lon": 76.5288734436035,
        "state": "Kerala",
        "country": "India",
        "district": {
          "id": 1,
          "name": "Kottayam"
        },
        "city": {
          "id": 1,
          "name": "Kanjirappally"
        },
        "place": {
          "id": 1,
          "name": "Koovappally"
        }
      },
      "package": 0,
      "contact": {
        "email": "soew988@gmail.com",
        "phone": 989756240,
        "address": {
          "country": "India",
          "state": "Kerala",
          "name": "allen45",
          "pincode": 686518,
          "streetAddress": "Sppally",
          "locality": "Koovappally",
          "city": "Koovappally"
        }
      },
      "about": "fsdbgfnvb cvc"
    }],
    "total_listings": 2
  }
};

new Vue({
  el: '#listings',
  data: {
    data: [],
  },
  mounted() {
    const self = this;

    self.data = e.data;
  },
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="listings" v-if="data.basic">
  <h1>{{data.basic.name}}</h1>
  <h2>{{data.basic.dob}}</h2>
  like wise all data
</div>

相关问题
最新问题