I have a custom component that I am using multiple times on a Vue page. I want to customize the background color for each instance of this component.
Here is the code for my component:
<template>
<div class="project-card" :style="{backgroundColor: color}">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
name: 'ProjectCard',
props: {
title: String,
description: String
},
data: function() {
return {
color: "#000"
}
}
}
</script>
And here is the Vue page where I am using the component:
<template>
<div class="projects">
<ProjectCard
title="Project 01"
description="Lorem Ipsum"
/>
<ProjectCard
title="Project 02"
description="Lorem Ipsum"
/>
</template>
<script>
import ProjectCard from '@/components/ProjectCard.vue'
export default {
name: 'projects',
components: {
ProjectCard
}
}
</script>
Can I change the background color of the project-card component on my projects page, similar to how I changed the text props?
Thank you for your assistance!