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"/>
		<span class="sr-only">Loading …</span>
	</div>
	<div
		v-else
		class="mt-1 mb-1"
	>
		<router-link
			class="align-left blog-details"
			:to="'/profile/' + author.username"
		>
			<img
				class="article-author-img rounded-circle"
				:src="'build/images/' + author.avatar"
				alt="profile"
			>
		</router-link>
		<router-link :to="'/profile/' + author.username">
			{{ author.username }}
		</router-link>
	</div>
</template>

<script>

import axios from 'axios'

export default {
	name: 'UserCard',
	props: {
		authorIri: {
			type: String,
			required: true
		}
	},
	data: () => ({
		author: null,
		isLoading: true
	}),
	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>