在 Vue JS 中使用 v-for 为组件设置 props答案

【问题标题】：Setting props for components using v-for in Vue JS在 Vue JS 中使用 v-for 为组件设置 props
【发布时间】：2017-03-18 00:44:18
【问题描述】：

我有一个 PhoneCard.vue 组件，我正在尝试将 props 传递给它。

<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>

但是这会导致开发工具中的错误，例如属性用户名未定义，错误渲染组件，无法读取未定义的属性拆分。

我尝试了其他方法来执行此操作，但它们似乎都会导致相同的错误。关于如何将组件的 props 正确绑定到 vue-for 循环的当前迭代对象的任何想法？

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

试试

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

【讨论】：

该死的，在看到你的答案之前我已经输了一天。伯尔尼，你对这种行为有什么解释吗？

【解决方案2】：

经过一番修改，回答了我自己的问题。

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

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

很奇怪，我之前使用 watch 方法来监听组件 props 的变化，并且它工作得完美无缺，但我想这里发生了一些不同的事情。任何关于有什么不同或为什么会这样工作的见解都会很酷！

【讨论】：