vue中复选框怎么默认全选，至少选择4个才可以点击下一步

Question

[1]项目中有这样的需求，要怎么解决呢。。。默认复选框是全选状态，也可以取消某一个状态，至少选择4个选项才可以点击下一步。这个要怎么实现啊
html：
<ul>

    <li>
      <input id="yl" type="checkbox" value="yl"  v-model="isSelected" @click="nextBtn">
      <label for="yl">原料进厂</label>
    </li>
    <li>
      <input id="mk" type="checkbox" value="mk"  v-model="isSelected" @click="nextBtn">
      <label for="mk">模块组装</label>
    </li>
    <li>
      <input id="cp" type="checkbox" value="cp"  v-model="isSelected" @click="nextBtn">
      <label for="cp">成品&#12288;&#12288;</label>
    </li>
    <li>
      <input id="zj" type="checkbox" value="zj"  v-model="isSelected" @click="nextBtn">
      <label for="zj">质检&#12288;&#12288;</label>
    </li>
    <li>
      <input id="cc" type="checkbox" value="cc"  v-model="isSelected" @click="nextBtn">
      <label for="cc">仓储&#12288;&#12288;</label>
    </li>
    <li>
      <input id="wl" type="checkbox" value="wl"  v-model="isSelected" @click="nextBtn">
      <label for="wl">物流&#12288;&#12288;</label>
    </li>
    <li>
      <input id="xs" checked type="checkbox" value="xs"  v-model="isSelected" @click="nextBtn">
      <label for="xs">销售&#12288;&#12288;</label>
    </li>
    <li class="choose-btn">
      <button type="button" @click="$router.back(-1)">上一步</button>
      <button type="button" >下一步</button>
    </li>
  </ul>

js：
export default {
data () {

return {
  checked: true,
  isSave: false,
  isSelected: []
}

},
methods: {

// 当点击checkbox时，先触发click事件。打印数据，然后，才把checbox的value值传给model，
// 使用setTimeout是用伪异步的方式去执行这段代码
nextBtn: function () {
  var self = this
  setTimeout(function () {
    console.log(self.isSelected)
  }, 0)
}

}
}

默认复选框是全选状态，也可以取消某一个状态，至少选择4个选项才可以点击下一步。这个要怎么实现啊

这是选择两项之后控制台输出的

Answer 1

isSelected已经储存了选中的值，那在点击下一步的时候判断一下这个数组长度大于四时才进行后续操作就可以了。

Answer 2

可以声明一个空数组，当进入页面的时候你说是默认全选状态，那么此数组为空，当点击复选框方法的时候，在数组中push记录一个为选中的input的id，最后点击提交的时候，判断该数组中的未被选中的input的个数或者状态都行，这个思路你试下？

Answer 3

你这个可以用一个数组存这些值，比如

data = [{
    name: '原料进厂',
    selected: false
},{
    name: '模块组装',
    selected: false
}]

然后把这个selected绑定到v-model上，在这个checkbox上添加click事情，每次点击都遍历数组，就能知道选中的个数。