Vue.js实做星星评分功能

今天要来简单的实做星星评分的功能
在这项单元内也会简单的讲解到props与$emit的传递
先附上成品图：

先在components中新增一个Star的元件

    <div class="star_box">
      <div class='star_line'>
        <span class="star">☆</span>
      </div>
      <div class="star_line star_pointer">
        <span class="star">★</span>
      </div>
    </div>

接着在views中也新增一个Products的组件
※请自行取得远端资料

再远端资料的物件中，新增一个star的值，并预设为0

并将star组件import给Products
将取得的资料由外层传递给内层（使用props）
传递资料的属性名称，设为:product-item

<Star :product-item="item"></Star>

回到Star的组件中，先将星星的部分都给弄好
※做法为：做出两种星星，一组没颜色，一组有颜色，用有颜色的星星覆盖没颜色的星星
星星的总数量total预设为3颗(这里看你想要几颗星都行)

把外层:product-item的资料传递给props接收
在有颜色的星星上跑v-for回圈，将物件中的star值给取出来
(还记得前面说的吗？在物件中新增一个star: 0 的值，因为我们要默认空白让顾客自行去评分)

接着再methods中命名一个changeValue的Function事件，并将其绑定@click事件在空白星星上，由@click="changeValue去接收total的参数
为了让星星分别绑定在个别商品上，因此我们要比对每样商品的id
所以我增加了const = starInfo的物件，将star和id给塞了进去

  <div class="star_box">
    <div class='star_line'>
      <span
        class="star"
        v-for="(star, key) in total"
        @click="changeValue(star)"
        :style="starStyle"
        :key="key"
      >☆</span>
    </div>
    <div class="star_line star_pointer">
      <span
        class="star"
        v-for="(star, key) in productItem.star"
        :class="{'active': isActive}"
        :style="starStyle"
        :key="key"
      >★</span>
    </div>
  </div>
<script>
export default {
  data () {
    return {
      isActive: true
    }
  },
  props: {
    total: {
      default: 3
    },
    size: {
      default: 30
    },
    productItem: {
      type: Object
    }
  },
  methods: {
    changeValue (star) {
      const starInfo = {
        star,
        id: this.productItem.id
      }
      this.$emit('update', starInfo)
    }
  },
  computed: {
    starStyle () {
    //starStyle是计算星星的样式
      return {
        width: this.size + 'px',
        height: this.size + 'px',
        fontSize: this.size + 'px'
      }
    }
  }
}
</script>

接下来透过$emit将star的资料传递给外层，因此将属性名称命名为update，并将starInfo给传递出去

<Star :product-item="item" @update="changeStar"></Star>

再外层(products)建立changeStar的Function，并接收内层所传递出来的starInfo
这时starInfo的资料应该是长成这样：
｛id: "xxxxxxxxxxx", star: 0｝
为了避免让新的star值去覆盖旧的star值
将物件依序经过 JSON.stringify 及 JSON.parse 两个方法，建立全新的物件
并且跑forEach回圈，做完id的比对就大致上完成了

    changeStar (value) {
      const newProducts = JSON.parse(JSON.stringify(this.products))
      newProducts.forEach(item => {
        if (item.id === value.id) {
          item.star = value.star
        }
      })
    }

结语
希望藉由这样的过程有帮助您更加理解星星评分的制作过程

那麽今天的文章就到这啦，我们大家明天见～