首页 文章

在Vue JS中使用v-for为组件设置道具

提问于
浏览 次
2

我有一个PhoneCard.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();
    }
}

然后，一旦我将ajax调用的响应数据设置为等于phoneNumbers属性 .

在此问题出现之后，我尝试遍历phoneNumber数组中的每个数字，并将正在迭代的当前数字的值绑定到Card的组件，如下所示：

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

但是这会导致dev工具中的错误，例如属性username未定义，错误呈现组件，无法读取未定义的属性拆分 .

我已经尝试过其他方法来做到这一点，但它们似乎都会导致同样的错误 . 关于如何将组件的道具正确绑定到vue-for循环的当前迭代对象的任何想法？

javascript vuejs2 vue-component

2 回答

  • 5

    尝试

    export default {
    props: ['userData'],
    data() {
        return {
            cardData: this.userData
        }
    }
}
    回复于
  • 3

    在经过一些修修补补之后回答了我自己的问题 .

    而不是调用函数来设置watch函数中的数据，我所要做的就是让它工作 .

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

    奇怪的是，我之前使用了watch方法来监听组件道具的变化，它的工作完美无缺，但我想这里有不同的东西 . 任何有关不同之处或为何如此运作的见解都会很酷！

    回复于

相关问题