vue.js에서 다형 목록을 렌더링하는 방법

vue.js에서 다형 목록을 렌더링하는 방법

고려사항:

class X {}
class B extends X {}
class C extends X {}

컴포넌트에는 X가 배열되어 있습니다.

<template>
    <ul>
        <li v-for="item in items">
            <a-view v-if="item.constructor.name === 'A'"></a-view>
            <b-view v-if="item.constructor.name === 'B'"></b-view>
        </li>
    </ul>
</template>

export default {
    ...
data() {
    return {
        items: [new A(), new B()]
    }
}

이것은 작동하지만 우아하지는 않다.type check에서는 문자열을 사용합니다.item instanceof B관용적인 es6 코드입니다.단, 이것은 동작하지 않습니다.

vue.js에서 다형 목록을 렌더링하는 관용적인 방법은 무엇입니까?

Component키워드는 다음과 같이 검색해야 합니다.

<li v-for="item in items">
  <component v-bind:is="item"></component>
<li>

Vue 매뉴얼 참조

다음은 예를 제시하겠습니다.https://codesandbox.io/s/k2mwrj6w3r

언급URL : https://stackoverflow.com/questions/48735849/how-to-render-polymorphic-list-in-vue-js