example-code/javascript-vue/js/panel/saved-cards.vue

<template>
<div v-if="cards">
<div v-for="(card, index) in cards" :key="card.id" class="saved-card">
	<span>{{card.card.brand[0].toUpperCase() + card.card.brand.substring(1)}}
	(••••{{card.card.last4}})</span> 
	<input :checked="index === 0 || card.id == preferred" :value="card.id" name="selected-card" type="radio"
	@change="$emit('update:pickedCard', card.id)">
</div>
</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		mounted() {
			if (this.cards && this.cards.length > 0) {
				this.$emit('update:pickedCard', this.cards[0].id)
			}
		},
		unmounted() {
			this.$emit('update:pickedCard', null)
		},
		props: ['token', 'cards', 'preferred'],
		emits: ['update:pickedCard']
	}
</script>