如何改变孩子的颜色

Question

请告诉我如何使用工具Vue.js和/或SCSS来实现逻辑。根据子级的级别（数据级别-从1到6），颜色会发生变化。 jQuery中有一个实现的示例。

Here Is My jsfiddle

TypeError: Cannot read property 'string' of undefined

  79 |   scaleExtent: [1, 10]
  80 | }, _commonProps2.default);
  81 | ChartSvg.propTypes = {
> 82 |   id: _react.PropTypes.string,

  .ui-core-skill {
     display: flex;
     align-items: center;
 }

 .ui-core-skill-name {
    float: left;
    margin: 0 7px 0 0;
 }

 .ui-core-skill-level {
    display: flex;
    align-items: center;

 .dot-max {
     height: 9px;
     width: 9px;
     float: left;
     border-radius: 50%;
     margin: 0 5px 0 5px;
  }

.dot-mid {
     height: 7px;
     width: 7px;
     @extend .dot-max;
 }

.dot-min {
    height: 5px;
    width: 5px;
    @extend .dot-max;
  }
}

Answer 1

仅使用scss的最简单解决方案就是对每个级别执行以下操作：

/*Your old scss goes above here*/

.ui-core-skill-level[data-level="4"] {
   .dot{
     &-max{
        background-color: rgba(238, 122, 71, 1);
     }

     &-mid{
        background-color: rgba(238, 122, 71, 1);
     }

     &-min{
        background-color: rgba(238, 122, 71, .3);
     }
   }
}