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ディレクティブを使用します。

第2に、各アイテムのプロパティを正しく参照していません。あなたはこのようにそれらを参照することができます。

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>