How to modify a child component's colour attribute from the parent in vue js

I have a child Card component:

<template>    <v-card      class="mx-auto"      max-width="500"      color=color      outlined      dark    >      <v-list-item three-line>        <v-list-item-content>          <div class="overline mb-4">            OVERLINE                      </div>          <v-list-item-title class="headline mb-1">            Headline 5          </v-list-item-title>          <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>        </v-list-item-content>          <v-list-item-avatar          tile          size="80"          color="grey"        ></v-list-item-avatar>      </v-list-item>        <v-card-actions>        <v-btn          outlined          rounded          text        >          Button        </v-btn>      </v-card-actions>    </v-card>  </template>    <script>    export default {      name: 'Card',      props: {        color: String      }    }  </script>  

And from the parent component I want to pass in the color to the child. A part of the parent component's code is shown below.

<template>    <Card v-bind:color="color"/>  </template>    <script>    export default {     data() {        return {          color: "#FFC400"        }      },    }  </script>  

As you can see I tried to use a prop to pass the color from the parent to the child, however even though I'm able to pass the data to the child, prints out #FFC400 I'm not sure how to assign the color value to the v-card's color attribute. How can I achieve this? Thank you.

https://stackoverflow.com/questions/66620939/how-to-modify-a-child-components-colour-attribute-from-the-parent-in-vue-js March 14, 2021 at 11:55AM