vue antd 表单无法清除多选框，以及dom从新渲染问题；

Question

今天做表单的时候重置表单，平常都没问题，但是今天有了多选框，重置的时候各种，input框，select，都能清除，但是多选框清除不了还会报错。
这是没重置之前，然后点击重置；
其他的都重置了，多选框重置不了；大家也可以试试自己的antd的form表单看看能不能清除；这个问题也还好，不知道是什么原因。但是这个表单是进来时用setFieldsValue设置了值的；我想重置的时候从新渲染一下这个表单，让他只有选项没有值也相当于重置了，但是不知道怎么下手。我设置了v-if但是没效果；我的想法是点击清除按钮 this.show=false this.show=true让他从新渲染一遍然后设置表单的初始数据，比如有哪些选项，label的名字，这个表单是动态的，表单的名字，类型，选项先渲染，这是步骤一，然后setFieldsValue这样设置初始值这是步骤二。我的做法是刚才提过的用v-if然后从新渲染步骤一达到重置的效果，才接触vue这个该怎么操作了？antd这里的重置不知道哪里出了问题了，写法都一样死活清除不了` <a-form-item v-bind="formItemLayout" label="Checkbox.Group">

  <a-checkbox-group
    v-decorator="['checkbox-group']"
    style="width: 100%;"
  >
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">
          A
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="B">
          B
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="C">
          C
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="D">
          D
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="E">
          E
        </a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</a-form-item>`

Answer 1

像Angular、 Vue、React 这样的 MVVM 框架为了减少 DOM 操作，会竭其所能复用原有的 DOM节点，当 model 发生变化的时候，通过 diff 变化前后的 model 来确定需要重新渲染哪些节点，如果节点的某个属性没有被记录在 model 中的话，这个属性将不在 diff 的考虑之内。
所以这里 checkboxGroup 可能没有绑定相应的 model ，导致 Vue 没有监听其值的变化。题主可以给 <a-checkbox-group> bind 一个 :key="{{Math.random()}}"，或者在setFeildValue的同时也修改一下 checkboxGroup 的key ，如果成功重置 checkboxGroup 的话，说明问题确实出在这里，需要 显式地将每一个<a-checkbox> 的 checked 值绑定到 data 中去。
当然，我对 Vue 指令的执行时机不太了解，所以不知道 Math.random() 是不是每次渲染都要执行的，更不知道 Vue 会不会跳过 checkBoxGroup 去 diff checkBox，上述方法可能没法诊断问题所在。但是使用 MVVM 框架的一个原则就是：所有可能变化的值都需要写在 model 里，对于 Vue 而言就是写在 data 或者 computed 等会影响渲染的地方，对于 React 就是写在 state 里，对于微信小程序就是 data 和 properties 里。

Answer 2

antd的那个问题没有解决，不过也没关系；方法有很多种，首先是这是个动态表单，先渲染表单项，在渲染表单值；重置表单可以考虑setFeildValue把每个值都设置为空；但是我的页面这么做有点繁琐；后面还是考虑，从新渲染表单，之前 this.show=false this.show=true这么做可能不能引起数据的更新，加上

延迟以后， updated()钩子多执行了一次，最开始没加估计在一个函数里面这并不能触发vue的数据改变驱动；。用:key值不行，想着和v-if的原理应该差不多，但是antd的多选框会疯狂报错；最后选择了用v-if,然后这里的settimeout改成 this.$nextTick这个属性要好一些