请问vue怎么实现多选，并且要去的选中的值

Question

本人刚入坑vue不久，在双向绑定后取得了选中的值，然后实现全选功能时，发现以前写的一个全选功能在这里失效了。在我去掉v-model指令时，全选功能就可以了，请问v-model和：checked有什么冲突吗？

Answer 1

我写了一个例子给你,进下面这个网址把代码贴上去就可以运行了,代码有点糙,凑活着看吧,我也接触Vue不久,一起进步吧!
https://jsfiddle.net/Lxqobgu8/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    <p>
      {{checkList}}
    </p>
    <p>
      <input type="checkbox" id="all" @click="checkAll" v-model="isCheckAll" />
      <label for="all">全选</label>
    </p>
    <span v-for="(item,index) in checkboxList" :key="index">
    <input type="checkbox" :id="item" @click="checked(item)" :checked="checkList.indexOf(item)>-1"/><label :for="item">{{item}}</label>
   </span>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    checkboxList: ['A', 'B', 'C'],
    checkList: [],
    isCheckAll: false,
  },
  watch: {
    checkList: function(val) {
      if (val.length === this.checkboxList.length) {
        this.isCheckAll = true
      } else {
        this.isCheckAll = false
      }
    }
  },
  methods: {
    checkAll() {
        if(this.isCheckAll){
            Object.assign(this.checkList,this.checkboxList)          
        }else{
          this.checkList = []
        }        
      },
      checked(item) {
        if (this.checkList.indexOf(item) > -1) {
          let index = this.checkList.indexOf(item)
          this.checkList.splice(index, 1)
        } else {
          this.checkList.push(item)
        }
      }
  }
})

Answer 2

v-modle在复选框里，取到的值就是他的cheacked值

Answer 3

大概意思，凑活看?

<input v-for="ckoption in checkOptions" :value="ckoption" >

data: {
    checkOptions: ['jack','john','mike'],
},
......

all: function() {
    this.checkNames = this.checkOptions
}

Answer 4

我试了有冲突，我是这样写的
在all 方法中获取所有的input type为checked的然后，循环设置它们的checked为this.isCheck

methods: {
        all: function(){
            var that=this;
            this.isCheck=!this.isCheck;
            var box=document.querySelectorAll('input[type="checkbox"]');

            [].forEach.call(box,function(item,index){
                item.checked=that.isCheck;
            })
        }
    }

Answer 5

别用checked，要操作v-model绑定的值，你可以把它们绑定到一个json对象的key上，给所有key值设为true应该就可以实现全选了。

Answer 6

all(isFlag){
this.isCheck=isFlag
}

实现全选,调用的时候@click=all(true);
取消全选，调用的时候@click=all(false);