Я хотел бы отобразить список компонентов в зависимости от того, относится ли свойство type к определенному типу. Например, если resource.type === 'article' отобразить все ресурсы с типом article и т. Д.

Мой массив ресурсов выглядит так

enter image description here

Я создал компонент, который по сути представляет собой просто представление.

<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?

0
maxwellgover 23 Дек 2016 в 20:55

1 ответ

Лучший ответ

Если <resource-card> больше нигде не используется, то просто передайте ему resource, и пусть он сам решает, что отрисовывать в соответствии с resource.type, должно быть достаточно.

Если вам может понадобиться карта article позже в другом месте или вы хотите более элегантный дизайн, вы можете определить компонент для каждого типа ресурса, а в v-for вы можете использовать динамические компоненты для визуализации различных компонентов в одном цикле.

1
JJPandari 25 Дек 2016 в 07:56