v-model在checkbox上遇到的问题总结

如图：

实现在用户列表中输入信息时，下面的列表随之更新，我遇到的问题是，列表更新后，对应的选中状态没有及时更新。

以下为示例代码

<template>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox @click.prevent.native="handleCheckAll">筛选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup">
      <Checkbox v-for="(item,key) in userList" :key="key" :label="item.info"></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {
        data () {
            return {
                checkAllGroup: ['香蕉', '香西瓜'],
                userList: [
                  {info:'香蕉'},
                  {info:'苹果'},
                  {info:'香西瓜'},
                  {info:'西瓜'},
                  {info:'不香'},
                  {info:'香薰'}
                ]
            }
        },
        methods: {
          handleCheckAll () {
            let arr = this.userList
            let arrLen = arr.length
            let selectArr = this.checkAllGroup
            this.userList = []
            for (let i = 0; i < arrLen; i++) {
              if (arr[i].info.indexOf('香') !== -1) {
                this.userList.push(arr[i])
              }
            }
          }
        }
    }
</script>

经过我的多方查证，终于找到问题所在。有两个原因导致：

1.$set，关于为什么会用到它，我在官网找到这句话

.

 

然后就根据这段话，对checkAllGroup重新进行了赋值操作。但是用了这个之后，还是有点小问题，第一次搜索时的状态还是不对，如果在列表没有变的情况下，第二次搜索的选中状态值就对了，感觉还是数据同步更新造成的问题。以下是代码示例：

            for (let j = 0; j < selectArr.length; j++) {
              this.$set(this.checkAllGroup, j, selectArr[j])
            }

再次去翻官网文档时，发现了第二个原因

2. $nextTick

根据这段话，对代码又一次完善之后，终于解决了问题。

 

以上就是解决该问题的步骤，不知道这是不是最好的解决方法，但这是我目前能想到的办法，如果以后想到更好的方案，再来补充