similar element with alternate background shade

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!

Answer №1

Include color as a prop:

 <ProjectCard
      title="Project 02"
      description="Lorem Ipsum"
      color= "#000F"
    />
<ProjectCard
      title="Project 02"
      description="Lorem Ipsum"
      color= "#00FF00"
    />

and within the script:

<script>
export default {
  name: 'ProjectCard',
  props: {
    title: String,
    description: String,
    color:String
  },
  data: function() {
    return {
      color: "#000"
    }
  }
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference. .picture-container ...

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

NuxtJS Page is generated twice

Currently, I am encountering a problem in NuxtJS where a method is being triggered twice, resulting in two requests being sent. This issue occurs on a specific page, with the problematic method being created(). When opening the page with a parameter like ...

sticky placement changes when option is chosen

I'm experimenting with the CSS style called position: sticky and I've encountered an issue. Everything works perfectly until the select element is activated, causing the page to scroll back to the original position of the sticky element. <div ...

Traverse an SVG element using JavaScript

I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...

Static Nuxt: Issue with Loading Fetched State on New Routes

I'm setting up a fully static web application using Nuxt, as detailed on this page In addition to the main site, I have a small blog that needs data from an API. To achieve this, I am utilizing the fetch hook. async fetch() { this.posts = await fet ...

Could not locate the CSS file within the HTML document (404)

I've searched high and low on YouTube but can't seem to find a solution to this problem. Every time I run the code, it gives me an error message saying GET net::ERR_ABORTED 404 (NOT FOUND) <html> <head> <title>itays websit ...

Two-column layout with consistent height vertically, but varying heights on individual rows

By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...

Vue, socket.io and Express Session all reset with each new page load

I am currently working on developing a basic application with a login feature to experiment with socketio, vue, and nodejs (express). I have successfully implemented sending and receiving functionality on both the client and server sides. However, I am fac ...

The CSS file that is defined first in the node.js HTML is the only one being utilized

Currently, I am incorporating CSS and JS files into my node.js/express application with the help of the ejs templating engine. Interestingly, while the JavaScript files are being successfully implemented, only the first included CSS file seems to be affect ...

"Unlocking the potential of Vue.js: Grabbing the object ID with a

I am encountering an issue with accessing the object ID when I click on the edit or delete buttons in my CRUD operation. The event.target is returning the values of the edit and delete buttons instead. This is what my HTML template looks like: <div ...

What is causing VSCode's TypeScript checker to overlook these specific imported types?

Encountering a frustrating dilemma within VS Code while working on my Vite/Vue frontend project. It appears that certain types imported from my Node backend are unable to be located. Within my frontend: https://i.stack.imgur.com/NSTRM.png The presence o ...

Ways to create autonomy among the fields?

Is there a way to make the fields and buttons independent of each other, just like in the case of Adding more people? Check out this example image. No matter how many fields I add, they will not be linked to each other. Editing or removing one field shoul ...

Using Vue to make a REST API call in a JavaScript file

I have been trying to convert an Axios API call from a Vue page into a standalone module that can be reused multiple times in my app. Unfortunately, all my attempts so far have failed and I'm not sure if it's because I lack experience working wit ...

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

JavaScript-powered horizontal sliderFeel free to use this unique text

I'm new to JS and trying to create a horizontal slider. Here's the current JS code I have: var slideIndex = 0; slider(); function slider() { var i; var x = document.getElementsByClassName("part"); for (i = 0; i < x.length; i++) { x[i].styl ...

Angular application featuring scrolling buttons

[Apologies for any language errors] I need to create a scrollable view with scroll buttons, similar to the image below: Specifications: If the list overflows, display right/left buttons. Hide the scroll buttons if there is no overflow. Disable the le ...

Getting rid of a particular jQuery animation

I have been searching all over the site, but my limited knowledge prevented me from finding the right solution. I've been working on my website and had previously used a different theme. I have made several changes and am quite happy with it overall. ...

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

I have set padding in my 'body' tag, but I want my top navigation bar to cover the entire page without being affected by it. I attempted to fix this by setting the width to 100% and using negative padding and margin values, but it did not work a ...

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...