如何将道具传递给vue Js中的样式对象

Question

我试图使用一个对象来控制应用程序某些部分的样式，因为我试图避免内联样式。请问如何在下面的样式对象中使用来自道具的颜色？

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

我在主体中使用带有 :style="styling" 的对象。

Answer 1

首先应该将props 选项声明为数据选项之外的属性，其次，将styling 属性定义为计算属性：

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

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