• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Vue 게시판 composition api 부분 질문

composition api 부분 질문

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #134786

    손성호
    참가자
    <template>
    <div style="padding : 10px">
        <h4>팔로워</h4>
        <input placeholder="🔍" />
        <div class="post-header" v-for="(a,i) in follower" :key="i">
            <div class="profile" :style="`background-image: url(${follower[i].image})`"></div>
            <span class="profile-name">{{follower[i].name}}</span>
        </div>
    </div>
    </template>
    <script>
    import axios from 'axios';
    import {onMounted, reactive, ref, toRefs, watch} from 'vue'
    export default {
        name:'mypage',
        // composition api 사용법
        setup(props){
            // 이 안에서 state 생성/조작, method,computed,watch랑 hook도 가능
            // setup() 은 created hook 과 같은 기능을 한다.
            let follower = ref([]);
            // 데이터생성법1 ref(데이터)
            // let test = reactive({name:'kim'})
            // // 데이터생성법2 reactive(데이터) 보통 array,object 넣기는 하는데, ref 랑 기능적으로 큰 차이없음
            
            let {one} = toRefs(props)
            console.log(one.value)
            // // 어떤 props 받아오고싶다면 {프롭스이름} = toRefs(props)라고 쓴다 props는 setup()파라미터.
            // watch(one,()=>{
            // })
            // // watch 쓰고싶으면 그대로 쓰고 watch(감시할거,()=>{실행할코드})
            // let result = computed(()=>{
            //     return follower.value.length
            // })
            // console.log(result.value)
             // computed 쓰고싶으면 그대로 쓰고 computed(()=>{return 연산결과})
            //lifecycle Hook 사용하려면 예를들어 mounted 의 경우 setup()안에서
            // 밑처럼 쓴후 콜백 안에서 작성
            onMounted(()=>{
                axios.get('/follower.json').then((a)=>{
                
                    follower.value = a.data
                    // ref에 있는 값을 가져오고싶으면 setup()안에서는 변수뒤에 .value를 붙임
                   
            }).catch((err)=>{console.log('오류',err)})
            })
            return {follower}
        },
    }
    </script>
    <style scoped>
    /* style태그 뒤에 scoped 쓰면 style 값이 다른곳으로 전염되지않고 이 뷰 파일 안에서만 적용된다. */
        
    </style>
    
    
    자꾸 이런 워닝과 에러가 나와서
    [Vue warn]: Unhandled error during execution of scheduler flush at <Mypage one=1 > at <Container 인스타데이터=(3) [{…}, {…}, {…}]
    step=3 이미지="" ... > at <App>
    MyPage.vue:29 
    
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') at setup (MyPage.vue:29:25) 
    
    코드들 주석 처리 해가면서 미리보기 해봤는데요
    
        let {one} = toRefs(props)
            console.log(one.value)
    이 부분부터 에러가 생기는거 같습니다. value 가 undefined 라는거 같은데 props도 잘전달해주고 있고, toRefs 를 import도 해오고있는데
    이런 에러가 뜨고 해당 뷰 파일은 아예 마운트가 되지 않습니다. 이유가 뭘까요
     
    #134798

    codingapple
    키 마스터
    props 받아온거 props:에 등록도 해봅시다
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠