Nativescript Vue TypeError：无法读取未定义的属性“0”
Posted
技术标签:
【中文标题】Nativescript Vue TypeError：无法读取未定义的属性“0”【英文标题】：Nativescript Vue TypeError: Cannot read property '0' of undefined 【发布时间】：2019-08-04 07:08:25 【问题描述】：我有来自 google_place_api 的数据，其中响应数据是 json
我正在使用的应用程序出现问题，点击或粘贴不在 google_place_api 上的照片（照片）时会出现错误
我制作的以下代码
<RadListView orientation = "horizontal" for = "restaurant in restaurants" @ itemTap = "onItemTap">
<v-template>
<StackLayout orientation = "horizontal">
<StackLayout margin = "10">
<StackLayout class = "album-image" height = "110"
width = "125" v-if = "restaurant.photos == null" backgroundImage = "~ / assets / images / no-image.jpg"
borderRadius = "5">
<Button horizontalAlignment = "right"
marginRight = "5" marginTop = "80"
width = "50" height = "20"
class = "fa btn-rounded-sm"
color = "# FFFFFF" backgroundColor = "# 3b75ff">
'fa-star' | fonticon restaurant.rating
</ Button>
</ StackLayout>
<StackLayout class = "album-image" height = "110"
v-else width = "125":
backgroundImage = "'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference='+ restaurant.photos [0] .photo_reference +' & key = AIzaSyBAL1OTLzPeepaf_USJXL93BpUFNEZnW0s '"
borderRadius = "5">
<Button horizontalAlignment = "right"
marginRight = "5" marginTop = "80"
width = "50" height = "20"
class = "fa btn-rounded-sm"
color = "# FFFFFF" backgroundColor = "# 3b75ff">
'fa-star' | fonticon restaurant.rating
</ Button>
</ StackLayout>
<Label fontSize = "14" class = "font-weight-bold"
color = "# 000000": text = "restaurant.name"
width = "125" textWrap = "true"> </ Label>
<Label fontSize = "12" color = "# 999999" v-if = "restaurant.opening_hours" text = "Open"> </ Label>
<Label fontSize = "12" color = "# 999999" v-else text = "Close"> </ Label>
</ StackLayout>
</ StackLayout>
</ v-template>
</ RadListView>
methods:
onItemTap: function (args)
if (args.item.photos == false)
this. $ navigateTo (Details,
props:
name: args.item.name,
photo_reference: '2',
vicinity: args.item.vicinity,
place_id: args.item.place_id
)
else
this. $ navigateTo (Details,
props:
name: args.item.name,
photo_reference: args.item.photos [0] .photo_reference,
vicinity: args.item.vicinity,
place_id: args.item.place_id
)
;
这是来自 json google_place_api 的响应
"html_attributions" : [],
"next_page_token" : "CqQCHQEAAJCG9rz5PgTwy98lf48-BwOY4r1w81EKnY5z9dANWCoIkoAAJk3DM1S39yCVS-v4V3TQz6YtyfDTGdERz5uOkeVsO0gnUzrFHpVF20sw_hEzrfaTRH8XooobZx3R03RDyKWXIsBRnTk81n_5mmpGWSWVWJqmbED6vmpskS67S8VNk6rCPxFvJUwLJA33BY2cSNstJuYxvTrF3_gsFsjVjMFNFRRTa6w3qG3NiYh1BTltepP2D35xjJvDjmMojGyYUt4qZEbL7HEYQljJadowtVsr0Z8uoS_fDRHi_euhQKEtainwCU5xwP-OdFWS4mVf6TLSga-e7bahfED8lAK0wKACrjpIjL8d4P9wpb0l55xejGNFOtbbWHi4frOdtO9OOxIQGigF4VhSapLvGNKTq1lIKBoUr7jykxb1u8x9WhKi4X5CruPaOIE",
"results" : [
"geometry" :
"location" :
"lat" : -6.226227,
"lng" : 106.847663
,
"viewport" :
"northeast" :
"lat" : -6.224883769708498,
"lng" : 106.8489245802915
,
"southwest" :
"lat" : -6.227581730291503,
"lng" : 106.8462266197085
,
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
"id" : "0d7b22d2f507af850a9b2349c4aab667b185bfd3",
"name" : "Lembaga Pendidikan Forwarder Citra",
"place_id" : "ChIJB2g2e3X0aS4RMmBKDzR9-JA",
"plus_code" :
"compound_code" : "QRFX+G3 Jakarta, Daerah Khusus Ibukota Jakarta, Indonesia",
"global_code" : "6P58QRFX+G3"
,
"reference" : "ChIJB2g2e3X0aS4RMmBKDzR9-JA",
"scope" : "GOOGLE",
"types" : [ "school", "point_of_interest", "establishment" ],
"vicinity" : "Jalan Doktor Saharjo No.90, RT.1/RW.1, Tebet Barat"
,
"geometry" :
"location" :
"lat" : -6.224798300000001,
"lng" : 106.8497668
,
"viewport" :
"northeast" :
"lat" : -6.223519219708498,
"lng" : 106.8511687802915
,
"southwest" :
"lat" : -6.226217180291503,
"lng" : 106.8484708197085
,
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
"id" : "4fbbb8de1cae9e9695046dc1635ba4740e043b24",
"name" : "Sekolah Dasar Negeri Tebet Barat 05 Pagi",
"photos" : [
"height" : 581,
"html_attributions" : [
"\u003ca href=\"https://maps.google.com/maps/contrib/103922188834564148985/photos\"\u003eMuhammad Fahrezi\u003c/a\u003e"
],
"photo_reference" : "CmRaAAAAnbRH-U389KjLJajYPjyGhU6rKmIu4xj9VgK5nykZyNL7F2-16-heXOAgx1ZuYPSHDGCygjFeP91gtlKGS4riCsaDz-9Laqe3a_Nv0djiAVXnVDDAK6cVfLpn9OkAbNUWEhD3wS-5z-IQ6hgfNU42VVUMGhSJFDaQUcziw7SGEdqxdkkeAyxfsg",
"width" : 581
],
"place_id" : "ChIJJVbQUI7zaS4Rm2Xt5hsmolE",
"plus_code" :
"compound_code" : "QRGX+3W Jakarta, Daerah Khusus Ibukota Jakarta, Indonesia",
"global_code" : "6P58QRGX+3W"
,
"rating" : 4.8,
"reference" : "ChIJJVbQUI7zaS4Rm2Xt5hsmolE",
"scope" : "GOOGLE",
"types" : [ "point_of_interest", "school", "establishment" ],
"user_ratings_total" : 19,
"vicinity" : "Jalan Tebet Dalam III No.49, RT.3/RW.1, Tebet Barat"
在我看来，上面的错误是因为照片数组不在 json 响应部分之一中。 如果我单击或点击包含来自 google_place_api 的照片的 json 响应的结果，则应用程序将按预期运行
如何修复没有 json 照片响应的错误？
【问题讨论】：
【参考方案1】：测试args.item.photos == false 无法按您的意愿工作，因为当photos 不存在时，它会返回true。您可以使用if (!args.item.photos) 或if (typeof args.item.photos === 'undefined') 进行测试。
不过，您还是在重复一些代码。我会将其重构为：
onItemTap: function (args)
const detailsProps =
name: args.item.name,
vicinity: args.item.vicinity,
place_id: args.item.place_id
// make sure photo_reference exists and add it to the props list
if (typeof args.item.photos !== 'undefined'
&& args.item.photos
&& !!args.item.photos[0].photo_reference)
detailsProps.photo_reference = args.item.photos[0].photo_reference
this.$navigateTo (Details,
props: detailsProps
)
【讨论】：
太棒了...谢谢@tiago 的帮助以上是关于Nativescript Vue TypeError：无法读取未定义的属性“0”的主要内容，如果未能解决你的问题，请参考以下文章
无法在 nativescript vue 中导入 @nota/nativescript-webview-ext/vue