Setting props for components using v-for in Vue JS

Question

I have a PhoneCard.vue component that I'm trying to pass props to.

<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();
        }
    }
}

The component receives a property of userData, which is then being set to the cardData property of the component.

I have another Vue.js component that I'm using as a page. On this page I'm making an AJAX call to an api to get a list of numbers and users.

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();
    }
}

Then once I've set the response data from the ajax call equal to the phoneNumbers property.

After this comes the issue, I try to iterate through each number in the phoneNumber array and bind the value for the current number being iterated through to the Card's component, like so:

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

However this leads to errors in dev tools such as property username is undefined, error rendering component, cannot read property split of undefined.

I've tried other ways to do this but they all seem to cause the same error. any ideas on how to properly bind props of a component to the current iteration object of a vue-for loop?

Answer 1

Try

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