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

Question

我想知道如何迭代组件名称列表（来自对 API 服务器的 AJAX 调用）并将它们呈现为组件，并传递相关属性到每个组件（即动态绑定它们的属性）。

到目前为止，我已经成功地迭代了一个 JSON 代表组件的项目列表，并成功呈现了这些组件。我现在想做的是使用 v-bind.

绑定每个组件的属性

在下面的示例中，item-one 组件将接收具有 item1.jpg 值的 image 属性； 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]"。

Answer 1

首先，您需要去掉 v-bind 前面的冒号。当作为属性前缀时，冒号是 v-bind 的简写形式。但是，当将密钥对对象传递给绑定时，您只需使用 v-bind 指令。

其次，您没有正确引用每个项目的属性。您可以这样引用它们：

v-bind="item[Object.keys(item)[0]]"

如果稍微更改一下 items 属性的结构，就不需要使用 Object.keys:

items: [{ 
  type: 'item-one', 
  props: { 'image': 'item1.jpg' },
}, {
  type: 'item-two',
}]

这样，通过预先明确标记组件类型和属性，您的模板会更容易理解：

<div v-for="item in items">
  <component :is="item.type" v-bind="item.props"></component>
</div>

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

How to bind dynamic props to dynamic components in VueJS 2

javascript

vue.js

vue-component

vuejs2

nuxt.js