Spookie/assets/js/components/users/UserCard.vue

<template>
    <div v-if="isLoading" class="circle">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <span class="sr-only">Loading …</span>
    </div>
    <div v-else class="mt-1 mb-1">
        <b-link class="align-left blog-details" :to="'/profile/' + author.username">
            <img class="article-author-img rounded-circle"
                 :src="'build/images/' + author.avatar"
                 alt="profile"></b-link>
        <b-link :to="'/profile/' + author.username">
            {{ author.username }}
        </b-link>
    </div>
</template>


<script>

import axios from "axios";

export default {
    name: "Author",
    data: () => ({
        author: null,
        isLoading: true
    }),
    props: ["authorIri"],

    mounted() {
        this.getAuthor();
    },
    methods: {
        getAuthor() {
            console.log("here" + this.authorIri);
            axios
                .get(this.authorIri)
                .then(response => {
                    console.log("response");
                    console.log(response);
                    this.author = response.data;
                    console.log(this.author);
                    this.isLoading = false;

                })
                .catch(error => {
                    console.log(error);
                });
            console.log(this.author);
        }
    }
};
</script>