Question

考虑：

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()]
    }
}

这有效，但并不优雅。类型检查使用一个字符串，其中item instanceof B是惯用的es6代码。但是，这不起作用。

在vue.js中呈现多态列表的惯用方法是什么？

Answer 1

Component关键字必须是您要找的内容，例如：

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

Reference from Vue documentation

以下是一个示例：https://codesandbox.io/s/k2mwrj6w3r

如何在vue.js中呈现多态列表？

1 个答案: