Hey there! I'm new to vue.js and I'm struggling to figure out why my data is not being passed to the child component. I've tried a few different approaches, but none seem to be working as expected. It feels like I'm really close, but something just isn't clicking. Can you take a look at my setup in App.vue:
<template>
<div class="app">
<Header/>
<div class="row">
<div class="col-3">
<Services v-bind:services="services"></Services>
</div>
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
import Services from "@/components/Service";
export default {
nam: 'App',
components: {
Services,
Header,
},
data: function () {
return {
services: [{
title: "Logo flatdesign",
description: "I create amazing flat designs.",
image: "https://example.com/image1.jpg",
price: 6.7,
rate: 4,
id:1
},{
title: "Quick Logo",
description: "I can quickly design a logo.",
image: "https://example.com/image2.jpg",
price: 5.5,
rate: 3,
id:2
},{
title: "Another Flat Design Logo",
description: "I specialize in super flat designs.",
image: "https://example.com/image3.jpg",
price: 6.7,
rate: 4,
id:3
}]
}
}
}
</script>
<style>
</style>
Service.vue
<template>
<div class="home">
<div class="row">
<div class="col-3" v-for="service in services" v-bind:key="service.id">
<div class="jumbotron">
<img :src="service.image" height="100%" width="100%">
<h4>
{{service.title}}
</h4>
<div class="row">
<div class="col rate">
{{service.rate}} ★
</div>
<div class="col price">
{{service.price}} €
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
.rate{
color: yellow;
}
.price{
font-weight: bold;
}
</style>
I appreciate any help or guidance you can provide. Thank you so much for your assistance!