vue checkbox 选中问题

Question

<template>
  <div>
    <div class="form-group">
      <label >检索</label>
      <input type="text" class="form-control" v-model="k">
    </div>
    <div class="form-group" v-if="k">
      <p><a href="javascript:;" @click="all" >全选</a></p>
      <template v-for="(v, index) in selects">
        <label  v-if="v.name.toLowerCase().indexOf(k.toLowerCase()) != -1">
          <input type="checkbox" v-model="v.checked" > {{v.name}}
        </label> &nbsp;
      </template>

    </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          k:null,
          models:[],
        }
      },
      props:['data', 'select'],
      methods:{
        all(){
          for (var i = 0; i < this.selects.length; i++) {
            this.selects[i].checked = true
          }
        }
      },
      mounted() {
        this.selects = this.select
      }
    }
</script>

搜索框里输入A，显示了好几个结果，然后点击全选，那些checkbox都没反应，当我搜索框再输入一个关键词的时候，checkbox又都全部勾上了，这个问题困扰我很久啦

Answer 1

selects 你没有在data里面定义呀

Answer 2

可以看一下vue的官方文档（https://cn.vuejs.org/v2/guide...）：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

所以当你第一次点击调用all函数时，虽然this.selects各个元素的checked值都被改为true，但这样的变动不会被vue检测到，所以页面不会对此响应。而当你再输入新的关键词时，就会根据现在的this.selects的值重新进行条件渲染，所以就会出现全选的情况。

另外可以参考风格指南，规范v-for和v-if的使用：https://cn.vuejs.org/v2/style...

Answer 3

你倒是把那个select写出来啊，这样别人怎么帮你看。