Vue 複選框 checkbox 全選與取消全選

元件

<template>
	<p>
			全選：
		</p>
		<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
		<label for="checkbox">
			{{checked}}
		</label>
		<p>
			多個複選框：
		<
 
/p>
		<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
		<label for="runoob">
			Runoob
		</label>
		<input type="checkbox" id="google" value="Google" v-model="checkedNames"
 
>
		<label for="google">
			Google
		</label>
		<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
		<label for="taobao">
			taobao
		</label>
		<br>
		<span>
			選擇的值為:{{checkedNames}
 
}
		</span>
</template>

資料

 data() {
            return {
                checked: false,
				checkedNames: [],
				checkedArr: ["Runoob", "Taobao", "Google"]
            };
        },

方法

	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}