vuejs UI 框架 Quasar Framework的全选与反选

<template>
    <!-- 在该框架中，template里面编写html要注意一点，只有一个根标签-->
    <div>
        <!-- 复选框的样式属性需要自己去配置的，具体 看Quasar Framework框架的API文档-->
        <q-checkbox @input="checkAll()" v-model="allChecked" checked-icon="check_circle_outline" unchecked-icon="radio_button_unchecked"  label="全选" style="font-size: 12px;" color="grey" size="sm"/>        
        <div  v-for="value in proData">      
        <!--<span>{{value}}++++++{{value.name}}</span>--><!--重点了解-->
        <q-checkbox v-model="selection" :val="value.name" label="One" /><!-- val的值是下面数组的值，具体看Quasar Framework框架的API文档 -->
        <br><br>
      </div>
    </div>
</template>

<script>
    export default {
  data () {
    return {
      allChecked: false,
      selection: [],//双向绑定selection数据数组
      proData:[{
                        name: '111'
                    }, {
                        name: '222'
                    }, {
                        name: '333'
                    }, {
                        name: '444'
                    }]
    }
  },
  methods: {
       checkAll(){ 
                var this_=this;//如果没有这句话，则会报错显示checkArray没有声明或找不到
                if(this_.allChecked == true){//checkbox的状态为已勾选
                   this_.selection = [];
                      this_.proData.forEach(function(item){
                            //console.log(item.name);
                            this_.selection.push(item.name);
                      });                   
                 }else{     
                     //console.log("未勾选");
                     this_.selection = [];
                  }
            }
  },
  watch: { // 监视双向绑定的数据数组
                selection: {
                    handler(){ // 数据数组有变化将触发此函数
                        if(this.selection.length == this.proData.length){
                            this.allChecked = true;
                        }else{
                            this.allChecked = false;
                        }
                    },                  
                }
            }
}
</script>

<style>
</style>