Vue가 특정 API 요청에 대한 데이터를 렌더링하지 않음

Vue가 특정 API 요청에 대한 데이터를 렌더링하지 않음

다음 구성 요소가 있는데

<template>
  <div class="home">
    <div class="container"  v-if="data" >
      <Card v-for="result in data" :img="result.links[0]" :key="result.href"/>
    </div>
  </div>
</template>

<script>
 import Card from "../components/Card";
 import axios from "axios";
 export default {
   name: 'Home',
   components: {Card},
   data() {
     return {
       data: null,
     }
   },

   created() {
      axios.get('https://images-api.nasa.gov/search?q=mars').then(res => {
         return res.data.collection.items
      }).then(res => {
         this.data = res;
      })
    }
 }

"img" 프로펠러를 전달할 수 없어 카드 컴포넌트를 렌더링할 때 문제가 발생하는데, 콘솔에 "정의되지 않은 ('0' 읽음)의 속성을 읽을 수 없음" 오류가 표시되는데, 이는 "데이터" 속성이 API에서 올바른 데이터를 얻었음을 알 수 있기 때문에 이상하지만, "과 같은 쿼리 매개 변수가 다른 동일한 API에서 데이터를 가져오려고 할 때,https://images-api.nasa.gov/search?q=jupiter" 모든 것이 올바르게 작동한다.그럼 이게 Vue 내부 문제인지 API 문제인지 모르겠네?

결과가 정의되지 않았는지 확인하기 위해 코드를 약간 수정할 수 있다.

<Card v-for="result in data" :img="getImageLink(result)" :key="result.href"/>

이제 당신 방식대로라면

        getImageLink(result) {
            if (result.links) {
                return result.links[0];
            }

            return null;
        }

이렇게 하면 너의 문제가 해결될 것이다.

참조URL: https://stackoverflow.com/questions/69500697/vue-wont-render-data-for-specific-api-request