Sort.vue

<template>
	<div class="d-flex align-items-center">
		<div style="width: fit-content">{{ title }}</div>
		<div class="ml-2">
			<div
				class="up"
				:class="{
					sorted: currentSortDir == 'desc' && currentSort == fieldName,
					invisible: currentSortDir == 'asc' && currentSort == fieldName
				}">
				▲
			</div>
			<div
				class="down"
				:class="{
					sorted: currentSortDir == 'asc' && currentSort == fieldName,
					invisible: currentSortDir == 'desc' && currentSort == fieldName
				}">
				▼
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			required: true
		},
		fieldName: {
			type: String,
			required: true
		},
		currentSort: {
			type: String,
			required: true
		},
		currentSortDir: {
			type: String,
			required: true,
			validator: function (value) {
				return ["asc", "desc"].indexOf(value) !== -1
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.up,
.down {
	line-height: 10px;
	font-size: 1.1rem;
	transform: scale(1.5, 1);
	opacity: 0.3;
}

.sorted {
	opacity: 1;
}
</style>