我有一个 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 数组中的每个号码,并将当前被遍历的号码的值绑定(bind)到 Card 的组件,如下所示:
<phone-card v-for="number in phoneNumbers" :user-data="number"></phone-card>
但是这会导致开发工具中的错误,例如属性用户名未定义,错误渲染组件,无法读取未定义的属性拆分。
我尝试了其他方法来执行此操作,但它们似乎都会导致相同的错误。关于如何将组件的 props 正确绑定(bind)到 vue-for 循环的当前迭代对象的任何想法?
最佳答案
试试
export default {
props: ['userData'],
data() {
return {
cardData: this.userData
}
}
}
关于javascript - 在 Vue JS 中使用 v-for 为组件设置 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42869172/