温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Json response vue
api javascript json vue.js

javascript - 杰森回应

发布于 2020-04-04 11:05:09

新手问题。

我正在尝试使用道具打印城市名称。

让{{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
    },
   ]
}

这是基本的响应,因此我的目标是位置>城市。正如我之前提到的,除位置城市外,其他所有内容都可以打印,链接,喜欢等等,但是如果我仅打印位置,则可以。

查看更多

提问者
user6753358
被浏览
111
user2042869 2020-01-31 22:36

我相信是异步请求,因此当您尝试在渲染器上显示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 : "";
        }
    }
}