購物車勾選邏輯-Vue

在線上購買東西的時候一定會碰到購物車，這邊實作其一購物車JS，勾選商品事件。

以下兩個動作，並以vue實現，專注於資料綁定及尋訪陣列。

1. 點擊全部勾選，所有商品會全部勾起。
2. 任一商品取消勾選，全部勾選鈕會跟著取消勾選。

<div id="app">
      <label class="label">
        <input
          class="label__checkbox"
          type="checkbox"
          :checked="title"
          @click="handleTitle"
        />
        <span class="label__text">
          <span class="label__check">
            <i class="fa fa-check icon"></i>
          </span>
        </span>
      </label>
      <br />
      <hr />
      <div class="flex">
        <label class="label" v-for="(ck, index) in cks">
          <input
            class="label__checkbox"
            type="checkbox"
            :checked="ck.ck"
            @click="handle(index)"
          />
          <span class="label__text">
            <span class="label__check">
              <i class="fa fa-check icon"></i>
            </span>
          </span>
        </label>
      </div>
</div>

handle (): 點擊商品事件，會檢查是否每個商品 checkbox 都是 true。

handleTitle (): 點擊全部 checkbox 事件，將每個商品 checkbox 都改為 true 或 false。

new Vue({
        el: '#app',
        data: {
          title: false,
          cks: [
            {
              ck: false
            },
            {
              ck: false
            },
            {
              ck: false
            },
            {
              ck: false
            }            
          ]
        },
        methods: {
          handle(inx) {
            this.cks[inx]['ck'] = !this.cks[inx]['ck']            
            this.title = this.cks.every(e => e.ck === true)            
          },
          handleTitle() {
            this.title = !this.title
            this.cks.forEach(element => element.ck = this.title)
          }
        }
      })