如何在VueJS 2中将动态道具绑定到动态组件

JavaScript Vue.js

宝儿

2020-03-23

我想知道如何迭代一个组件名称列表(这些名称来自对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]"在呈现的元素中获得了属性

第2964篇《如何在VueJS 2中将动态道具绑定到动态组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android