vue props를 데이터로쓰기

iikasam·2022년 12월 12일
 <swiper :slidesPerView="'auto'" :spaceBetween="30" class="mySwiper" v-if="movieList">
      <swiper-slide class="item_card" v-for="li in movieList" :key="li.id" @click="goDetail(li.id)">
        <img :src="image(li.poster_path)" alt="Poster">
        <img :src="image2(key3)" alt="Poster">
        <p>{{li.poster_path}}</p>
        <h3> {{ li.title }}</h3>
        <p>{{key3}}</p>
      </swiper-slide>
    </swiper>

부모

data() {
        return {
            key3 : 'li.profile_path',
        };
    },
<img :src="image(li.poster_path)" alt="Poster">
<img :src="image(li.background_path)" alt="Poster">
<img :src="image(key3)" alt="Poster">

:image(데이터)

뿌려줄 데이터가 부모에 따라 달라져야 한다.
하지만 props로 가져온 텍스트는 그저 텍스트로 인식될 뿐이다.

<img src="https://image.tmdb.org/t/p/w300//z56bVX93oRG6uDeMACR7cXCnAbh.jpg" alt="Poster">
  <img src="https://image.tmdb.org/t/p/w300/li.profile_path" alt="Poster">

정보 !!
computed , emit

for문을 또 돌려라
왜냐하면 이미 movieList에 있는 poster_path를 뽑는다는게 말이 안된다

새로운 문제 봉착

부모 List 에서 movieList라는 배열을 자식에게 넘김
자식에서 movieList 찍으면 잘나오는데 로그로는 안찍힘(??????)

배열을 html상에서 불러오면 잘 나오는데
mounted가 문제인 것 같다.

mounted에서 콘솔 = 빈배열
디버깅모드에서 콘솔 = undefined

nextTick
https://cocobi.tistory.com/52

profile
묵묵히, 꾸준히,

0개의 댓글