Vueの共有プロパティに基づいてリストをレンダリングする

Question

typeプロパティが特定の型かどうかに基づいてコンポーネントのリストをレンダリングしたいと思います。例えば、resource.type === 'article'ならば、

私のリソースの配列が、私は基本的にはちょうど図であるコンポーネントを作成しているこの

のように見えるなど、種類の物品とリソースのすべてをレンダリングします。

<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に、あなたは1つのループ内の異なるコンポーネントをレンダリングするためにdynamic componentsを使用することができます。