skouter/components/new.vue

<template>
<div id="new" class="page">

<h2>New Loan</h2>

<section class="loans-list">

<h3 v-for="(l, indx) in loans"
:class="selected == indx ? 'sel' : ''"
@click="() => selected = indx"
>
{{l.title}}
</h3>

<div class="add">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0
0 1 8 4z"/> </svg>
</div>

</section>

</div>
</template>

<script>
const loans = [
	{title: "Loan Example"},
	{title: "Another One"}
]

export default {
	props: ['user'],
	data() {
		return {loans: loans, selected: 0}
	}
}
</script>