Make list-of-lists links act on correct parts

client/src/components/list-overview/main.vue

@@ -7,33 +7,13 @@
 			</p>
 
 			<div class="list">
-				<div class="item two-lines">
-					<div class="item-primary">15</div>
-					<div class="item-content has-secondary">
-						<div>List 1</div>
-						<div>Has some description</div>
+				<div class="item two-lines item-link" v-for="n in 8">
+					<div class="item-primary" @click="gotoList(n-1)">{{ 15 + n + Math.floor((Math.random()*10)+1) }}</div>
+					<div class="item-content has-secondary" @click="gotoList(n-1)">
+						<div>List {{ n }}</div>
+						<div>Has {{ "some".repeat(n) }} description</div>
 					</div>
-					<i class="item-secondary item-link" @click="deleteList(0)">
-						delete
-					</i>
-				</div>
-				<div class="item two-lines">
-					<div class="item-primary">23</div>
-					<div class="item-content has-secondary">
-						<div>List 2</div>
-						<div>Has some description</div>
-					</div>
-					<i class="item-secondary item-link" @click="deleteList(1)">
-						delete
-					</i>
-				</div>
-				<div class="item two-lines">
-					<div class="item-primary">7</div>
-					<div class="item-content has-secondary">
-						<div>List 3</div>
-						<div>Has some description</div>
-					</div>
-					<i class="item-secondary item-link" @click="deleteList(2)">
+					<i class="item-secondary item-link" @click="deleteList(n-1)">
 						delete
 					</i>
 				</div>
@@ -49,6 +29,9 @@
 		methods: {
 			deleteList (itemIndex) {
 				console.log('Delete: ' + itemIndex)
+			},
+			gotoList (itemIndex) {
+				console.log('Goto: ' + itemIndex)
 			}
 		}
 	}