Fix vue

vue/components/FunkoCard.js

@@ -1,17 +1,19 @@
 export default {
-	props: ['funko'],
+	props: {
+		funko: Object
+	},
 	template: `
 		<div class="card text-center">
 			<img class='card-img-top' :src="'https://laurenacton.github.io/img/' + funko.img + '.jpg'" :alt="funko.name" width="150" />
 			<div class="card-header">
-				<p>{{funko.name}}</p>
+				<p v-html="funko.title"></p>
 			</div>
 			<div class="card-body">
 				<div class="card-text">
-					<p>{{funko.desc}}</p>
+					<p v-html="funko.description"></p>
 				</div>
-				<a :href="{{funko.href}}" class="btn btn-primary stretched-link">Read more</a>
+				<a :href="funko.title" class="btn btn-primary stretched-link">Read more</a>
 			</div>
 		</div>
 	`
-}
+};

vue/funkos.js

@@ -54,12 +54,5 @@ const funkos = [
 		price: 50,
 		description: 'bob',
 		rank: 1
-	},
-	{
-		title: 'My fave funko',
-		img: 'myfavefunko',
-		price: 'priceless',
-		description: 'arsehole',
-		rank: -400
 	}
-];
+];

vue/index.html

@@ -20,7 +20,7 @@
 
 			<div class="row row-cols-2 row-cols-md-3 row-cols-md-4 gy-5">
 				<div v-for='funko in funkos'>
-					<Funko 
+					<funko-card :funko="funko" />
 				</div>
 			</div>
 		</div>
@@ -29,7 +29,7 @@
 	<script src="funkos.js"></script>
 
 	<script type="module">
-		import FunkoCard from './components/FunkoCard.vue'
+		import FunkoCard from './components/FunkoCard.js';
 
 		Vue.createApp({
 			components: {
@@ -44,4 +44,4 @@
 	</script>
 </body>
 
-</html>
+</html>