Javascript 如何才能在vue js中显示以下数据？

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

新Vue({
el:“#清单”，
数据：{
数据：[]，
},
安装的（）{
此.$nextTick（函数（）{
var self=这个；
$.ajax({
url:“https://”，
方法：“获取”，
数据类型：“JSON”，
成功：职能（e）{
self.data=e.data；
},
});
})
},
})

我的html代码是

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

{{basic.name}
{{basic.dob}
像所有数据一样

---

有人能帮我展示一下吗。我的js很弱。这是我获得的数据，我需要在vue js中显示上述数据。我将所有数据存储到变量data[]。从中，我如何能够显示相同的内容？

嵌套在数据（和计算的）属性中的任何数据都可以在{和}标记之间的模板中找到

例如：

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

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

Vue.element（'my-element'{
模板：
“这就是一个例子！”+
“{{msg}}”
数据：函数（）{
返回{
消息：“默认消息”
}
},

因此，在您的情况下，使用嵌套属性与在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: []
    }
},

Vue.element（'my-element'{
模板：
“这就是一个例子！”+
“{data.wallet.amount}”
“{listing.name}”
}
数据：函数（）{
返回{
数据：[]
}
},

注意 数据对象应从函数返回，从原始文档返回：

定义组件时，必须将数据声明为返回初始数据对象的函数，因为将有许多实例使用相同的定义创建。如果我们使用普通对象作为数据，则相同的对象将通过引用在所有创建的实例之间共享！通过提供数据函数，每次创建新实例时我们可以调用它来返回初始数据的新副本。（）

进一步阅读 我建议您阅读Vue指南，特别是关于 ，和

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

将您的html更改为：

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

{{data.basic.name}
{{data.basic.dob}
像所有数据一样

您需要的一件事是在没有数据的情况下防止渲染

您有一个

data

变量，并且

basic

在它里面。当您有它时，您想要包含的所有东西都在它里面，所以您将有很多东西，比如

data.basic.name

const e={
“状态”：正确，
“数据”：{
“基本”：{
“姓名”：“哈吉”，
“dob”：“2018-01-01”，
“性别”：“男性”，
“创建时间”：“2018-01-08T13:38:49.767Z”，
“名字”：“啊”，
“lastname”：“Sh”，
“用户类型”：“代理”，
“演员”：1，
“用户名”：“阿苏”，
“联系人”：{
“电子邮件”：ah@gmail.com",
“电话”：863249517，
“地址”：空
},
“是新的”：错，
“电子邮件是否已验证”：正确，
“是否已验证电话”：真
},
“钱包”：{
“金额”：144.0，
“tds”：6.0
},
“氏族”：无效，
“平衡”：48，
“氏族身份”：假，
“清单”：[{
“pid”：36，
“名称”：“实验室”，
“网站”：“实验室”，
“类别”：{
“姓名”：“教育”
},
“地点”：{
“lat”：9.52766533190131，
“lon”：76.82213544558，
“州”：“喀拉拉邦”，
“国家”：“印度”，
“地区”：{
“id”：1，
“名称”：“Kottayam”
},
“城市”：{
“id”：1，
“名称”：“Kanjirappally”
},
“地点”：{
“id”：1，
“名称”：“Koovapally”
}
},
“包”：0，
“联系人”：{
“电子邮件”：ah@gmail.com",
“电话”：8986234851，
“地址”：{
“国家”：“印度”，
“州”：“喀拉拉邦”，
“姓名”：“你好”，
“pincode”：686895，
“街道地址”：“Kottayam\nKanjirappally”，
“地点”：“Koovapally”，
“城市”：“库瓦帕利”
}
},
“关于”：“IT公司”
}, {
“pid”：37，
“姓名”：“路易斯”，
“网站”：“ouis”，
“类别”：{
“姓名”：“教育”
},
“地点”：{
“lat”：10.0273434437709，
“lon”：76.5288734436035，
“州”：“喀拉拉邦”，
“国家”：“印度”，
“地区”：{
“id”：1，
“名称”：“Kottayam”
},
“城市”：{
“id”：1，
“名称”：“Kanjirappally”
},
“地点”：{
“id”：1，
“名称”：“Koovapally”
}
},
“包”：0，
“联系人”：{
“电子邮件”：soew988@gmail.com",
“电话”：989756240，
“地址”：{
“国家”：“印度”，
“州”：“喀拉拉邦”，
“名称”：“allen45”，
“pincode”：686518，
“街道地址”：“SPPALY”，
“地点”：“Koovapally”，
“城市”：“库瓦帕利”
}
},
“关于”：“fsdbgfnvb cvc”
}],
“总清单”：2
}
};
新Vue({
el:“#清单”，
数据：{
数据：[]，
},
安装的（）{
const self=这个；
self.data=e.data；
},
})；

{{data.basic.name}
{{data.basic.dob}
像所有数据一样

同样在Vue.js 2.x中

数据

必须是一个函数。

数据（）{return{data:[]}

，先生，这是Vue.js您标记的对不起先生，…

新Vue的
数据
不一定是一个函数，只有组件的
数据
。先生，{{data.basic.name}何时错误为[Vue warn]：呈现函数中出现错误：“TypeError:无法读取未定义的”（在中找到）的属性“name”（在）先生，如何在basic
data.basic.contact.email中显示电子邮件、电话和adsress