如何在 vue Js 中将道具传递给样式 object

Question

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".

Answer 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}`
         }
  } 
}

Answer 2

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".