vue.js - How to change component css with props with Nuxt Js Vue js

Question

I'm new to Nuxt and Vue, thanks for being indulgent ;). I have a "Subtitle" component that I use in another "Main" component (names are for the example).

How can I change the css of the "subtitle" component from the "Main" component ?

Here "Subtitle" component :

<template>
    <div>
       <h1 :class="data">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        title: String,
    }
}
</script>

And here my "Main" component :

<template>
    <div class="container">
        <Subtitle :title="title""></Subtitle>           
    </div>
</template>

I searched with the props etc.... But now I've been on it for a while and I'm blocking.

Thanks for your help!

question from:https://stackoverflow.com/questions/65901143/how-to-change-component-css-with-props-with-nuxt-js-vue-js

Answer 1

You can do it using the combination of props and computed

Subtitle Component

<template>
    <div>
       <h1 :style="getStyle">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        stylings: Object,
    },
   computed: {
    getStyle() {
      return this.stylings;
    }
   }
}
</script>

Main Component

<template>
    <div class="container">
        <Subtitle :stylings="customStyle"></Subtitle>           
    </div>
</template>
export default {
    name: 'subtitle',
    data() {
        return {
          customStyle: {
              'font-weight': 'Bold',
      }
    }
}