Vue checkbox 用v-model实现数值的双向绑定

       今天在写老师的一个课设的时候，需要实现一个批量删除的功能，简单来说就是前台页面勾选项目，然后将所有的勾选的项目的id传给后台进行处理，由于自己对vue的不了解导致了自己花费了大量的时间在处理不必要的麻烦上面，在此谨醒自己，学东西不能只学表象，废话少说，下面是代码。

       首先用v-for实现对后台数据的展示（不得不说这个功能的强大）

<tr v-for="music in musicList" :key="music.id" >
              <td>
                <input type="checkbox" :value="music.id" v-model="check"/>
                <label>{{check}}</label>
              </td>
              <td>{{music.id}}</td>
              <td>{{music.name}}</td>
              <td>{{music.author}}</td>
              <td>{{music.status}}</td>
              <td>{{music.date}}</td>
              <td>
                <a :href="'http://localhost:8080/musics/attachment/'+music.id">{{music.file}}</a>
              </td>
              <td>{{music.comment}}</td>
              <td>
                <button
                  @click="setEditForm(music.id,music.name,music.author, music.status, music.date, music.comment)"
                  class="btn btn-info mr-4"
                >更新</button>
                <button @click="remove(music.id)" class="btn btn-danger">删除</button>
              </td>
            </tr>

 

出现出来的效果

接下来我要将勾选的项目的id传给后台

先写我一开始的做法

<input type="checkbox" :value="music.id" v-model="music.status" @click="method(music)"/>
//里面的值为每个项目的id，绑定的是项目的状态，即true或false，这里是一个坑

一开始我以为v-model绑定的值只能是true或false即只有选中和未选中两种情况，然后我想着通过点击事件来改变绑定的值，当初为什么会有这种奇怪的想法，说到底还是对知识不够理解

相应的方法如下，麻烦！！！

method1(data){//勾选复选框，获得他的id,判断id是否存在
    let id = data.id;
        if(data.status){
            if(this.check.length == 0)//如果集合为空，直接添加入集合
                this.check.push(id);
            //查看是否存在重复的id
            let result = this.check.find((value)=>{
                return Object.is(id, value)
            })
            if(!result){
                this.check.push(id);//如果不存在重复的id则添加到集合
            }
        }else{
            this.check = this.check.filter(function(item){
                return item != id;
            })//点击已勾选的则去除重复的id
        }
    },

以上方法都是我从网上一点一点搜罗下来的，没办法对vue不熟悉只能这样

但是在我查了vue中checkbox和v-model的使用发现了一个更为简单的方法（再次感叹vue的强大）

<input type="checkbox" :value="music.id" v-model="check"/>//没错它是可以直接绑定一个数组的

我这里绑定的是一个数组，这里每一项的值为music.id，是动态的并且都是绑定在同一个数组上的，如果勾选则将id加入到数组里，取消勾选则从数组里面取消，就差不多实现了这个功能，再次提醒我自己要好好学，不要做一个百度代码员！

更多关于checkbox和v-model请参考这篇文章，楼主说的很好很详细

https://www.jianshu.com/p/b7b3ee54d7a0