我想知道如何迭代一个组件名称列表(这些名称来自对API服务器的AJAX调用)并将它们呈现为组件,并将相关属性传递给每个组件(即动态绑定它们的属性)。
到目前为止,我已经设法迭代了代表组件的项目的JSON列表,并成功呈现了这些组件。我现在想做的是使用绑定每个组件的属性v-bind
。
在下面的示例中,item-one
组件将接收image
带有item1.jpg
值的属性;并且该item-two
组件不会获得任何属性。
<template>
<div v-for="item in items">
<component :is="Object.keys(item)[0]" :v-bind="???"></component>
</div>
</template>
<script>
import ItemOne from '../components/item-one'
import ItemTwo from '../components/item-two'
export default {
components: {
ItemOne,
ItemTwo
},
asyncData () {
return {
items: [
{ 'item-one': { 'image': 'item1.jpg' } },
{ 'item-two': { } }
]
}
}
}
</script>
我尝试使用,:v-bind="Object.values(Object.keys(item)[0])"
但v-bind="[object Object]"
在呈现的元素中获得了属性。