How to render polymorphic list in vue.js?

Question

Consider:

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

In a component, I have an array of 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()]
    }
}

This works, but is not elegant. The typecheck uses a string, where item instanceof B would be idiomatic es6 code. However, this does not work.

What is the idiomatic way of rendering a polymorphic list in vue.js?

Answer 1

Component keyword must be what you are looking for, like this:

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

Reference from Vue documentation

Here is an example: https://codesandbox.io/s/k2mwrj6w3r