CODEWITHSUNDEEP
cssvue.jsnuxt.jsvue-props
Max
Max

Reputation: 23

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

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!

Upvotes: 2

Views: 2303

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

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

Upvotes: 4

Related Questions