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!

Amaarockz · Accepted Answer · 2021-01-26 12:21:51Z

4

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',
      }
    }
}

answered Jan 26, 2021 at 12:21

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change component css with props with Nuxt Js Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related