vue iview 多选框赋值

Question

<CheckboxGroup v-model="fruit">
     <Checkbox v-for="(item,key) in historyData" :key="item.id" :label="item.id" :value="item.id" size="large" @on-change="select">
                         <span>{{item.name}}</span>
     </Checkbox>
</CheckboxGroup>

var vue =  new Vue({
    el: '#app',
    data (){
        return {
            historyData:[],
            fruit: []
        }
    },
    methods: {
        // 1
        querytable(evt){
            var dataSource = [];
            $.ajax({ 
                url: "/userRole/getRoles", 
                type:'post',
                data: {
                },
                async : false,
                dataType:'json',
                success: function(data){
                    if(data.type == 'success'){
                        dataSource = data;
                    }
              }}); 
                  this.historyData = dataSource.list;
                 for (var i = 0; i < dataSource.list.length; i++) {
                     this.fruit.push(dataSource.list[i].id)
                }
      },
      select(){
          console.log(this.fruit);
      }
    },
      //当页面加载的时候执行
         created () {
          this.querytable();
        }
    });

问题 1 无法显示value
问题 2 提交的时候如何获取已选中的value
新手请大神指教~

Answer 1

解决了,遇到老问题了,在html里~~那么多次都不涨记性....
CheckboxGroup 标签换成 checkbox-group

Answer 2

<CheckboxGroup v-model="fruit" @on-change="select()">
     <Checkbox v-for="(item,key) in historyData" :key="item.id" :label="item.id" :value="item.id" size="large">
          <span>{{item.name}}</span>
     </Checkbox>
</CheckboxGroup>