vue toggle功能使用中的一个重要的问题

如下使用场景：
 在复选“其他”按钮后，显示输入框，取消选择后，隐藏输入框。

但发现data中的form.appointmentItemOtherVisible 出现各种问题，
复选框的取消隐藏功能变反了，百思不得其解，但觉得肯定有办法解决，
于是把“form.appointmentItemOtherVisible” 改为“appointmentItemOtherVisible”，

即直接用data里第一层的变量，结果问题解决！

如果大家遇到这种莫名其妙的问题，可以考虑把visible放到data第一层中，可能能达到最终的效果。

<el-row>
  <el-col :span="24">
    <el-form-item
      label="检测项目"
      prop="appointmentItemShow"
      :rules="[{ required: true, message: '检测项目不能为空'}]"
    >
      <el-checkbox-group
        v-model="form.appointmentItemShow"
        @change="clickPunctureItem"
        size="small">
        <el-checkbox
          :label="item.paramKey"
          v-for="item in puncture.item"
          :key="item.id"
        >{{item.paramValue}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-col>
</el-row>

<el-row v-if="form.appointmentItemOtherVisible">
  <el-col :span="18">
    <el-form-item
      label="其他"
    >
      <el-input
        v-model="form.appointmentItemOther"
        placeholder="请输入其他检测项目"
        size="small"
        style="width:100%"
        type="textarea"
        :rows="2"
      ></el-input>
    </el-form-item>
  </el-col>
</el-row>