List.vue

<template>
	<div class="table-responsive">
		<table class="table table-striped table-hover">
			<thead v-if="displayHead">
				<tr>
					<th scope="col">UID</th>
					<th scope="col" class="d-none d-xl-table-cell" v-if="displayPubkey">
						PUBKEY
					</th>
				</tr>
			</thead>
			<tbody>
				<tr
					v-for="member in members"
					:key="member.uid"
					@click="redirect(member.hash)">
					<th scope="row">
						{{ member.uid }}
						<BadgeCertifStatus
							:limitDate="member.received_certifications.limit"
							:memberStatus="member.status" />
						<BadgeStatus :membre="member" />
					</th>
					<td class="d-none d-xl-table-cell" v-if="displayPubkey">
						{{ member.pubkey }}
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	props: {
		members: {
			type: Array,
			required: true
		},
		displayPubkey: {
			type: Boolean,
			default: true
		},
		displayHead: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		redirect(hash) {
			this.$router.push(
				this.localePath({ name: "membres-hash", params: { hash } })
			)
		}
	}
}
</script>