Vue JS에서 v-for를 사용하여 구성 요소에 대한 소품 설정

Vue JS에서 v-for를 사용하여 구성 요소에 대한 소품 설정

나는 전화 카드를 가지고 있다.소품을 전달하려는 vue 구성 요소.

<template>
    <div class='phone-number-card'>
        <div class='number-card-header'>
            <h4 class="number-card-header-text">{{ cardData.phone_number }}</h4>
            <span class="number-card-subheader">
                {{ cardData.username }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['userData'],
    components: {
    },
    data() {
        return {
            cardData: {}
        }
    },
    methods: {
        setCardData() {
            this.cardData = this.userData;
            console.log(this.cardData);
        }
    },
    watch: {
        userData() {
            this.setCardData();
        }
    }
}

구성요소는 userData의 속성을 수신하고, 이 속성은 구성요소의 cardData 속성으로 설정된다.

페이지로 사용하는 Vue.js 구성 요소가 하나 더 있어.이 페이지에서 나는 번호와 사용자 목록을 얻기 위해 API로 AJAX 전화를 걸고 있다.

import PhoneCard from './../../global/PhoneCard.vue';
export default {
    components: {
        'phone-card': PhoneCard
    },
    data() {
        return {
            phoneNumbers: [],
        }
    },
    methods: {
        fetchActiveNumbers() {
            console.log('fetch active num');
            axios.get('/api').then(res => {
                this.phoneNumbers = res.data;

            }).catch(err => {
                console.log(err.response.data);
            })
        }
    },
    mounted() {
        this.fetchActiveNumbers();
    }
}

일단 아약스 통화의 응답 데이터를 전화 번호 속성처럼 설정했다.

이 문제가 발생한 후, 나는 phoneNumber 배열의 각 번호를 통해 반복하고 현재 번호의 값을 다음과 같이 카드 구성요소에 바인딩하려고 한다.

<phone-card v-for="number in phoneNumbers" :user-data="number"></phone-card>

그러나 이는 속성 사용자 이름이 정의되지 않음, 오류 렌더링 구성 요소, 정의되지 않은 속성 분할을 읽을 수 없음 등의 개발 도구에 오류를 발생시킨다.

나는 이것을 하기 위해 다른 방법을 시도해 보았지만 그것들은 모두 같은 오류를 일으키는 것 같다.구성 요소의 소품을 루프의 현재 반복 객체에 적절하게 바인딩하는 방법에 대한 아이디어는?

해보다

export default {
    props: ['userData'],
    data() {
        return {
            cardData: this.userData
        }
    }
}

몇 번 땜질한 후, 내 질문에 대답했다.

시계 기능에 있는 데이터를 설정하기 위해 함수를 호출하는 대신, 내가 할 수 있는 일은 이것뿐이었다.

mounted() {
    this.cardData = this.userData;
}

이상해, 예전에 부품 소품 변경을 듣기 위해 시계 방식을 써봤는데, 흠잡을 데 없이 작동했는데, 여기 뭔가 다른 게 있나 봐.무엇이 다르고 왜 이런 식으로 작용하는지에 대한 어떤 통찰력이라도 있으면 멋질 것이다!

참조URL: https://stackoverflow.com/questions/42869172/setting-props-for-components-using-v-for-in-vue-js