javascript - Json响应vue

Question

新手问题。

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

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

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

Answer 1

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