vue中checkBox绑定v-model，更改v-model值时对应的选项没有被勾选

Question

使用bootstrapvue，做这样一个组件，默认ID、Task、name、state、owner被勾选，希望实现在type只选中defect的时候task改为未选中状态

columns中我用v-model绑定selectcol，watch监听type，当只选中defect的时候，改变selectcol的值，去掉task，但实际发现selectcol的值改变了，但是与之绑定的task的选中状态没变

而此时如果再次点击columns行的任意选项，task会一起被取消选中

再次点击story，又能够实现task跟随被选中

目前实现代码如下：

 <b-row>
     <span>Type:</span>
     <b-col cols="auto" style="margin-left:30px">
     <b-form-checkbox-group
         v-model="slectedType"
         :options="types"
         switches
     ></b-form-checkbox-group
     ></b-col>
 </b-row>
 <b-row>
     <span>Columns:</span>
     <b-col cols="auto">
     <b-form-checkbox-group
         v-model="slectedCol"
         :options="Columns"
         switches
     >{{ slectedCol }}
     </b-form-checkbox-group></b-col
     >
 </b-row>

data:function(){
    return{
     types: [
         { text: "Story", value: "story" },
         { text: "Defect", value: "defect" },
     ],
     slectedType: ["story", "defect"],
     slectedCol: ["id", "task_details", "name", "state", "owner"],
     Columns: [
         { text: "ID", value: "id" },
         { text: "Task", value: "task_details" },
         { text: "Name", value: "name" },
         { text: "State", value: "state" },
         { text: "Owner", value: "owner" },
         { text: "Project", value: "project" },
         { text: "QA", value: "qa" },
         { text: "BA", value: "ba" },
 ],
    }
}

watch: {
     slectedType(newt, oldt) {
         this.$nextTick(() => {
         if (newt.includes("defect") && !newt.includes("story")) {
         _.pull(this.slectedCol, "task_details");         
         } else {
         this.slectedCol.push("task_details");
         this.slectedCol=_.uniq(this.slectedCol);
         }
     });
     },
 },

Answer 1

问题已解决，问题出在lodash的_.pull,是在Vue中使用 lodash 的小坑，虽然lodash的pull是修改原变量，但是不会被Vue捕获的，因为Vue只是劫持了其监视值的相关方法（splice等），而lodash的pull直接使用了Array.propotype.splice，所以，要么使用without后重新复制，要么老老实实用原生的splice来删除
可将代码改为

slectedType(newt, oldt) {
      const index = this.slectedCol.indexOf("task_details");
      if (newt.includes("defect") && !newt.includes("story")) {
        // _.pull(this.slectedCol,"task_details")
        this.slectedCol.splice(index, 1);
        this.changeCol(this.slectedCol);
      } else {
        this.slectedCol.splice(index, 0,"task_details");
      }
    },

具体可参考：为什么lodash的remove在vuejs中不是响应式的？