Vue 全选/取消功能

这是一个组件：

<template>
    <div>
        <div>
            <input type="checkbox" v-model="isCheckAll" @change="checkedAll"> 全选/取消
        </div>
        <div v-for="(list, index) in checkboxLists">
            <input type="checkbox" v-model="checkedLists" :value="list.id"> {{ list.product_name }}            
        </div>
        <div>全选/取消 状态：{{ isCheckAll }}</div>
        <div>选中列表：{{ checkedLists }}</div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                checkboxLists: [
                    {
                        id: 1,
                        product_name: '女士银手链'
                    },
                    {
                        id: 2,
                        product_name: '女士银手镯'
                    },
                    {
                        id: 3,
                        product_name: '女士银耳环'
                    }
                ],
                isCheckAll: false,
                checkedLists: []
            }
        },
        methods: {
            checkedAll () {
                // 判断 全选/反选 是否点击
                if (this.isCheckAll) {
                    let arr = []
                    // 循环全部数据并push到一个数组中
                    this.checkboxLists.forEach(element => {
                        arr.push(element.id)
                    });
                    // 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
                    this.checkedLists = arr
                } else {
                    // 如果 全选/反选 为假，则选中列表初始化
                    this.checkedLists = []
                }
            }
        },
        watch: {
            // 监听选中列表属性，当选中列表发生变化时，会运行此方法
            checkedLists (newValue, oldValue) {
                // 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
                if (newValue.length === this.checkboxLists.length) {
                    this.isCheckAll = true
                } else {
                    // 否则为取消
                    this.isCheckAll = false
                }
            }
        }
    }
</script>