CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vue-component
Matt B
Matt B

Reputation: 267

How do I pass prop to style object in vue Js

I'm trying to use an object to control the style of certain parts of an app as I'm trying to avoid inline styling. What how do I use Colour from props in the styling object below please?

 data: () => ({   
         props: ['header', 'questions', 'index', 'colour'],
         sectionScore: [],  
         styling: {
             borderLeft: '10px solid ${this.colour}'
         }         
     }),

I'm using the object in the main body with :style="styling".

Upvotes: 0

Views: 1185

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

First the props option should be declared as a property outside the data option, second, define the styling property as a computed one :

props: ['header', 'questions', 'index', 'colour'],
data: () => ({   
         
         sectionScore: [],  
              
     }),

computed:{
   styling(){
     return {
             borderLeft: `10px solid ${this.colour}`
         }
  } 
}

Upvotes: 2

Related Questions