新手问题。
我正在尝试使用道具打印城市名称。
让{{props.feed.location}}打印我:
{ "latitude": 50.85, "longitude": 4.35, "name": "Brussels, Belgium", "id": 213633143 }
但是每当我执行{{props.feed.location.name}}来打印城市时,都会出现JS错误:
Error in render: "TypeError: Cannot read property 'name' of null"
found in
---> <VueInstagram>
<Insta> at src/components/Insta.vue
<Home> at src/views/Home.vue
<App> at src/App.vue
<Root>
有任何想法吗?谢谢!!
码
<template v-slot:feeds="props" class="row">
<div class="col-12">
<li class="fancy-list card list-unstyled">
<div class="innerinfo row">
<div class="col-4">
<!-- <img v-bind:src="props.feed.images.standard_resolution.url" /> -->
<a v-bind:href="props.feed.link">
<img
class="img-fluid rounded"
v-bind:src="props.feed.images.standard_resolution.urlNOT"
/>
</a>
</div>
<div class="col-8">
<span class="likes row align-items-center">
<font-awesome-icon
icon="heart"
class="mr-2"
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
/>
<h5
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.likes.count }}</h5>
</span>
<span
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.location.name }}</span>
</div>
</div>
</li>
</div>
</template>
资讯提供回应:
"data": [{
"comments": {
"count": 0
},
"caption": {
"created_time": "1296710352",
"text": "Inside le truc #foodtruck",
"from": {
"username": "kevin",
"full_name": "Kevin Systrom",
"type": "user",
"id": "3"
},
"id": "26621408"
},
"likes": {
"count": 15
},
"link": "http://instagr.am/p/BWrVZ/",
"user": {
"username": "kevin",
"profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_3_75sq_1295574122.jpg",
"id": "3"
},
"created_time": "1296710327",
"images": {
"low_resolution": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_7.jpg",
"width": 612,
"height": 612
}
},
"type": "image",
"users_in_photo": [],
"filter": "Earlybird",
"tags": ["foodtruck"],
"id": "22721881",
"location": {
"latitude": 37.778720183610183,
"longitude": -122.3962783813477,
"id": "520640",
"street_address": "",
"name": "Le Truc"
}
},
{
"videos": {
"low_resolution": {
"url": "http://distilleryvesper9-13.ak.instagram.com/090d06dad9cd11e2aa0912313817975d_102.mp4",
"width": 480,
"height": 480
},
"standard_resolution": {
"url": "http://distilleryvesper9-13.ak.instagram.com/090d06dad9cd11e2aa0912313817975d_101.mp4",
"width": 640,
"height": 640
},
"comments": {
"count": 2
},
"caption": null,
"likes": {
"count": 1
},
"link": "http://instagr.am/p/D/",
"created_time": "1279340983",
"images": {
"low_resolution": {
"url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_7.jpg",
"width": 612,
"height": 612
}
},
"type": "video",
"users_in_photo": null,
"filter": "Vesper",
"tags": [],
"id": "363839373298",
"user": {
"username": "kevin",
"full_name": "Kevin S",
"profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_3_75sq_1295574122.jpg",
"id": "3"
},
"location": null
},
]
}
这是基本的响应,因此我的目标是位置>城市。正如我之前提到的,除位置城市外,其他所有内容都可以打印,链接,喜欢等等,但是如果我仅打印位置,则可以。
我相信是异步请求,因此当您尝试在渲染器上显示location.name时,尚未加载该位置。
所以我认为你必须添加v-if,并且该范围将在props.feed将加载后呈现
<span v-if="props.feed.location"
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.location.name }}</span>
或者即使未加载也需要显示跨度,则可以添加计算值
<span :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }">locationName>
<script>
export default {
computed: {
locationName() {
return props.feed && props.feed.location ? props.feed.location.name : "";
}
}
}
哦,天哪,它奏效了。圣诞节快乐。