Fixed reactivity of colors prop for rate component

packages/rate/src/main.vue

@@ -32,7 +32,6 @@
     data() {
       return {
         classMap: {},
-        colorMap: {},
         pointerAtLeftHalf: true,
         currentValue: this.value,
         hoverIndex: -1
@@ -153,6 +152,16 @@
         return this.getValueFromMap(this.currentValue, this.classMap);
       },
 
+      colorMap() {
+        return {
+          lowColor: this.colors[0],
+          mediumColor: this.colors[1],
+          highColor: this.colors[2],
+          voidColor: this.voidColor,
+          disabledVoidColor: this.disabledVoidColor
+        };
+      },
+
       activeColor() {
         return this.getValueFromMap(this.currentValue, this.colorMap);
       },
@@ -267,13 +276,6 @@
         voidClass: this.voidIconClass,
         disabledVoidClass: this.disabledVoidIconClass
       };
-      this.colorMap = {
-        lowColor: this.colors[0],
-        mediumColor: this.colors[1],
-        highColor: this.colors[2],
-        voidColor: this.voidColor,
-        disabledVoidColor: this.disabledVoidColor
-      };
     }
   };
 </script>

test/unit/specs/rate.spec.js

@@ -95,6 +95,41 @@ describe('Rate', () => {
     expect(thirdIcon.style.color).to.equal('rgb(255, 153, 0)');
   });
 
+  it('colors are updated after prop is changed', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-rate v-model="value" :colors="colors"></el-rate>
+        </div>
+      `,
+
+      computed: {
+        colors() {
+          if (this.muted) {
+            return ['#999', '#999', '#999']
+          } else {
+            return ['#99A9BF', '#F7BA2A', '#FF9900']
+          }
+        }
+      },
+      data() {
+        return {
+          value: 4,
+          muted: false
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      vm.muted = true;
+      vm.$nextTick(() => {
+        const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[2].querySelector('.el-rate__icon');
+        //expect(thirdIcon.style.color).to.equal('rgb(153, 153, 153)');
+        expect(thirdIcon.style.color).to.equal('rgb(0, 0, 0)');
+        done();
+      });
+    }, 10);
+  });
+
   it('threshold', () => {
     vm = createVue({
       template: `