Bobi V1: Example card component

ExampleCard.vue

<template>
    <div class='col-sm-12 col-md-6 col-lg-3'>
        <!-- Iterate through the articles and create a card representing each one -->
        <div class='card card-body mb-3' @click='emitClicked(elementId, elementName, card.title)'>
            <dot-loader class='dot_loader' :color='loader.color' :loading='loader.loading' :size='50'></dot-loader>
            <h3 class'text_card_title mb-3'>{{ card.title }}</h3>
            <p class='text_card_body'>{{ card.body }}</p>
        </div>
    </div>
</template>

<script>
    // Export default exports the Vue JS instance to just this component
    export default {

        props: ['elementId', 'elementName', 'elementLink'],

        // The data that can be bound to this template
        data() {
            return {
                card: {},
                loader: {
                    loading: true,
                    color: '#FA9825'
                }
            }
        },

        // What to do when the component is created on the DOM
        created() {

            // Use this function to fetch Articles from an API and add the response to the data object above
            this.fetchCard(this.elementLink);                

        },

        // Methods object is simply an object of functions that can be called for this component
        methods: {
            fetchCard(page_url) {
                // fetch is a function that can be used to fetch data from a local API
                // We can chain functions together to deal with the reponse
                fetch(page_url)
                    .then(res => res.json())
                        .then(res => {
                            var obj = res;
                            this.card = obj;
                            this.loader.loading = false;
                        })
                        .catch(err => console.log('err ' + err));
            },
            emitClicked(el_id, el_name, title) {
                this.\$emit('card-clicked', el_id, el_name, title);
            }
        }
    }
</script>

<style>
    .text_card_title {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 800;
    }

    .text_card_body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 0px;
    } 

    .dot_loader {
        display: block;
        margin: 0 auto;
    }
</style>