Vue styling components

Question

I have a basic vue component. It looks like this:

 <script> export default { props: { source: { type: String, required: true, } }, } </script>

 <template> <div class="imageItem"> <img class="image" :data-srcset="source" /> <p> this is some text </p> </div> </template>

What I struggle to achieve is, when I load the component in the parent that looks something like this:

<imageItem :source="source" />

I want to be able to customize the component styles. For example something like this:

<imageItem :source="source" :textColor="red" />

I'm guessing I should do it with props also but its not working as expected.

Can someone share a proper way to do this ?

Answer 1

Try this:

 <script>
export default {
    props: {
        source: {
            type: String,
            required: true,
        },
        style:{
            type: String,
            required:true
        }            
    },
}
</script>

<template>
  <div class="imageItem">
    <img class="image" :data-srcset="source" :style="style" />
    <p> this is some text </p>
 </div>
</template>

And then in the prop: "color:red"

<imageItem :source="source" :style="color : red" />