我是Vue的新手，我正在通过axios导入一个json文件，它正在DOM上显示。现在我的问题是我如何在vue中定位json文件中的元素，或者如何将它传递给新的Vue元素？我可以使用vue chrome dev工具中的计算输出函数来定位它。但是我可以找到一种方法来将它定位到新的Vue中，这样我就可以放入我的html中。例如，我如何从地址传递数据 - ＆gt;市？ 这是我的Json：
{
"restaurant": [
{
"address": {
"city": "Berlin",
"country_code": "DE",
"id": 12345,
"latitude": 12345,
"longitude": 12345,
"street": "Muster Stra\u00dfe",
"street_no": "43",
"zipcode": "12627"
},
"chain": {
"group_name": null,
"id": 123,
"key_account": false,
"name": "XXX"
},
"created_ts": "2017-09-15T09:23:37.707020+00:00",
"custom_data": null,
"deleted": false,
"emails": [
{
"email": "firstname_883.lastname_883@xxx.com",
"email_type": "general",
"id": 123456,
"imprint": false
}
],
"global_id": "123456",
"id": 123456,
"modified_ts": "2017-11-30T12:10:13.298887+00:00",
"owner": {
"business_entity": null,
"company": "XXX",
"id": 123456,
"managing_directors": "",
"name": "Herr XXX",
"registration_court": "",
"registration_number": "",
"tax_number": ""
},
"phones": [
{
"id": 123456,
"imprint": false,
"phone_number": "+4930123456",
"phone_type": "fax"
},
{
"id": 123456,
"imprint": false,
"phone_number": "+4930123456",
"phone_type": "phone"
}
],
"platforms": {
"LH": {
"categories": [
{
"id": 123,
"name": "XXX",
"primary_category": true
},
{
"id": 123,
"name": "XXX",
"primary_category": false
}
],
"custom_data": {
"cocacola_promotion": false,
"custom_preorder_minimum_time": "",
"default_delivery_time": "",
"express": false,
"express_refund_logic": "",
"guaranteed_delivery_time": "",
"hide_google_places_order_action": true,
"lh_award": false,
"ninecookies_live_tracking": false,
"preorder": true,
"recommended": false,
"white_label": "",
"white_label_external": false,
"white_label_offline": false
},
"deleted": false,
"id": 123456,
"key_account": true,
"last_dowant_sync_ts": null,
"last_salesforce_sync_ts": null,
"name": "XXX",
"online": true,
"payment_methods": [
{
"id": 12,
"name": "cash",
"online_payment": false
},
{
"id": 12,
"name": "online",
"online_payment": true
}
],
"platform": "XD",
"platform_id": "123456",
"reachable": true,
"salesforce_id": "123456",
"slug": "XXX",
"transmissions": [
{
"enabled": true,
"id": 123,
"name": "XXX",
"parameters": {
"device_id": "XXX",
"phone_number": "11"
}
},
{
"enabled": true,
"id": 123,
"name": "sms",
"parameters": {
"sms_number": "+4930123456"
}
}
]
},
"PDE": {
"categories": [
{
"id": 123,
"name": "XXX",
"primary_category": false
},
{
"id": 123,
"name": "XXX",
"primary_category": true
}
],
"custom_data": {
"brand_promotion_monday": true,
"brand_promotion_thursday": false,
"brand_promotion_tuesday": false,
"brand_promotion_wednesday": true,
"cocacola_promotion": false,
"custom_preorder_minimum_time": "",
"default_delivery_time": "",
"express": false,
"express_refund_logic": "",
"guaranteed_delivery_time": "",
"hide_google_places_order_action": false,
"kinder_menu": false,
"ninecookies_live_tracking": false,
"pde_anniversary": false,
"preorder": true,
"white_label": "",
"white_label_external": false,
"white_label_offline": false
},
"deleted": false,
"id": 123456,
"key_account": true,
"last_dowant_sync_ts": "2017-11-30T12:20:32.887802+00:00",
"last_salesforce_sync_ts": null,
"name": "Pizza Max",
"online": true,
"payment_methods": [
{
"id": 37,
"name": "cash",
"online_payment": false
},
{
"id": 38,
"name": "online",
"online_payment": true
},
{
"id": 41,
"name": "ec_card",
"online_payment": false
}
],
"platform": "XXX",
"platform_id": "123",
"reachable": true,
"salesforce_id": "123456",
"slug": "musterstr-123",
"transmissions": [
{
"enabled": true,
"id": 123,
"name": "pos_polling",
"parameters": {
"pos_polling_id": "123456",
"pos_polling_password": "123456",
"pos_polling_user": "123456"
}
},
{
"enabled": true,
"id": 123,
"name": "sms",
"parameters": {
"sms_number": "+4930123456"
}
}
]
}
}
}]}
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VueJS</title>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- <p>{{ restaurant }}</p> -->
<p>{{ restaurant }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
restaurant: [],
address: [],
city: [],
},
mounted: function() {
this.load();
},
methods: {
load: function() {
this.restaurant = '...loading';
var vm = this;
axios.get('http://localhost:3000/restaurant')
.then(function(response) {
vm.restaurant = response.data;
console.log(vm.restaurant[0].address)
})
.catch(function(error) {
vm.restaurant = 'error' + error;
});
}
},
computed: {
output: function() {
return this.restaurant = vm.restaurant[0].address;
}
}
});
</script>
</body>
</html>
感谢您的帮助！
答案 0 :(得分：0)
餐厅是您的案例中的一个阵列作为回应。所以如果你只需要地址，那么我们就可以提取并使用它。
请查看代码段。
我正在使用静态数据替换ajax调用，您可以轻松替换它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VueJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="restaurant.length > 0">
<!-- you can also use loop through restaurant -->
<p>Id : {{ restaurant[0].address.id }}</p>
<p>City : {{ restaurant[0].address.city }}</p>
</div>
</div>
<script>
var yourAjaxData = {
"restaurant": [
{
"address": {
"city": "Berlin",
"country_code": "DE",
"id": 12345,
"latitude": 12345,
"longitude": 12345,
"street": "Muster Stra\u00dfe",
"street_no": "43",
"zipcode": "12627"
},
// your other data goes on and on ...
}]
};
var vm = new Vue({
el: '#app',
data: {
restaurant: []
},
mounted: function() {
this.load();
},
methods: {
load: function() {
this.restaurant = '...loading';
var vm = this;
// ajax call
// return data is object
// inside it restaurant is key
// restaurant's value is array
vm.restaurant = yourAjaxData.restaurant;
}
},
computed: {
output: function() {
return this.restaurant = vm.restaurant[0].address;
}
}
});
</script>
</body>
</html>