javascript - 基于 Vue 中的共享属性渲染列表

Question

我想根据 type 属性是否属于某种类型来渲染组件列表。例如，如果 resource.type === 'article'然后使用文章类型等渲染所有资源。

我的资源数组如下所示

我创建了一个基本上只是一个 View 的组件。

<template>
   <div class="type-feed">
       <resource-card></resource-card>
   </div>
</template>

<script>

import Vue from 'vue';
import VueFire from 'vuefire';
import ResourceCard from '../components/ResourceCard'

var resourcesRef = firebase.database().ref('resources');

// explicit installation required in module environments
Vue.use(VueFire);

export default {
    name: 'type-view',
    components: {
      ResourceCard
    },
    data () {
        return {

        }
    },
    firebase: {
        resources: resourcesRef
    }
}

</script>

<style>

</style>

<resource-card>组件应该接收列表并呈现有关单个资源对象的特定信息。类似于下面的内容

<resource-card v-for="(resource, index) in resources" :resource="resource>

我的问题是，通过 resources.type 呈现列表的最佳方式是什么？ ？

Answer 1

如果<resource-card>没有在其他地方使用，那么只需传递 resource并让它根据 resource.type 决定渲染什么应该足够了。

如果您需要article卡稍后在其他地方，或者你想要更优雅的设计，那么你可以为每种资源类型定义一个组件，并在v-for中，您可以使用dynamic components在一个循环中渲染不同的组件。