동적 요소를 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 지시문을 사용하면됩니다.

둘째, 각 항목의 속성을 올바르게 참조하지 않았습니다. 이처럼를 참조 할 수 있습니다 :

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

이 방법을 명시 적으로 표시하여 : 당신이 당신의 items 재산을 조금 구조를 변경 한 경우

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

---

당신은 Object.keys를 사용할 필요가 없습니다 것입니다 구성 요소 유형 및 속성을 미리 확인하면 템플릿을 훨씬 쉽게 이해할 수 있습니다.

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