无法检查具有Eelement-UI的vueJS上的复选框

Question

我是vue和element ui的新手。 预期： 我想使用输入和复选框组件进行对话框以进行添加和编辑。

问题： 到现在为止，编辑对话框运行正常，创建对话框也正常。 （复选框区域除外）。创建对话框上的复选框有奇怪的习惯不能轻易检查。我需要首先执行这些步骤，以便选中该框。

1单击框（单击获取图像）

click here

2输入或删除输入内容，之后选中的显示

click here

我保存功能没有问题。

表上的结果

click here

这是我的代码...

<el-dialog :title="$t(`label.exchange`)" :visible="dialogShown == 'editingExchange' || dialogShown == 'newExchange'" @close="closeDialog">
   <el-form label-position="top" :inline="true" size="mini" :model="editingExchange">
     <el-form-item :label="$t('label.code')">
       <el-input :disabled="dialogShown == 'editingExchange'" v-model="editingExchange.code"></el-input>
     </el-form-item>
     <el-form-item :label="$t('label.name')">
       <el-input v-model="editingExchange.name"></el-input>
     </el-form-item>
      <el-form-item v-show="dialogShown == 'editingExchange' || dialogShown == 'newExchange'" :label="$t('header.orderTypes')">
       <el-checkbox-group v-model="editingExchange.orderTypes">
         <el-checkbox v-for="type in allTypes" :label="type.key" :key="type.key">{{ type.label }}</el-checkbox>
       </el-checkbox-group>
     </el-form-item>
   </el-form>
   <div slot="footer">
     <el-button icon="el-icon-close" size="mini" type="info" @click="closeDialog">{{$t('label.cancel')}}</el-button>
     <el-button icon="mdi-content-save" size="mini" type="primary" :loading="saving" @click="saveExchange">{{$t('label.save')}}</el-button>
   </div>
</el-dialog>

<script>
import HeaderSetting from '@/components/HeaderSetting'
import {
  getColMinWidth,
  getColAlign,
  headerSettings,
  formatters
} from '../components/headers.js'
import {
  Pager,
  EnumTypes
} from '../components/ttypes.js'
import {
  interval0,
  pageSizes,
  defPageSize
} from '@/components/config.js'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Exchange",
  directives: {
    waves
  },
  components: {
    Sticky,
    HeaderSetting
  },
  data: () => ({
    EnumTypes: EnumTypes,
    formatters: formatters,
    pageSizes: pageSizes,
    exchangeLoading: false,
    exchangePager: new Pager(),
    exchangeHeaders: headerSettings.exchangeHeaders,
    reflushInterval: null,

    allTypes: [],
    headerSettings: {
      key: 'exchangeHeaders',
      value: headerSettings.exchangeHeaders
    },
    dialogShown: false,
    editingExchange: {},
    saving: true
  }),
  computed: {
    pageSizeIndex(){
      return `exchangePageSize`;
    },
    pageSize(){
      return this.exchangePager.pageSize;
    }
  },
  methods: {
    getColAlign: getColAlign,
    getColMinWidth: getColMinWidth,
    getPageSize() {
      this.$socket.emit('getPageSize', this.pageSizeIndex);
    },
    changePageSize(pageSize) {
      this.$socket.emit('setPageSize', this.pageSizeIndex, pageSize);
      this.exchangePager.pageSize = Number(pageSize);
      this.changeExchangeCurPage(1);
    },
    populateTypes() {
      var types = EnumTypes['orderType'];
      for (var obj in types) {
        this.allTypes.push({
          key: parseInt(obj),
          label: types[obj],
          disabled: false
        });
      }
    },
    getHeaderSettings() {
      this.$socket.emit('getHeaderSettings', ['exchangeHeaders']);
    },
    saveHeaderSetting() {
      this[this.headerSettings.key] = this.headerSettings.value;
      this.$socket.emit('setHeaderSetting', this.headerSettings.key, JSON.stringify(this.headerSettings.value));
      this.closeDialog();
    },
    closeDialog() {
      this.dialogShown = false;
      this.saving = false;
      this.getExchanges();
    },
    getExchanges(){
      this.getExchanges(this.exchangePager.curPage);
    },

    getDetails(id) {
      this.editingExchange = jsonCopy(this.exchangePager.items[id])
      this.dialogShown = 'showOrderTypes';
    },
    create() {
      this.editingExchange = {}
      this.editingExchange.orderTypes = []
      this.dialogShown = 'newExchange';
    },
    changeExchangeCurPage(curPage) {
      this.dialogShown = false;
      this.getExchanges(curPage);
    },
    getExchanges(curPage) {
      this.$socket.emit('getExchanges', this.exchangePager.curPage, this.pageSize);
    },
    editExchange(id) {
      this.editingExchange = jsonCopy(this.exchangePager.items[id])
      this.dialogShown = 'editingExchange';
    },
    saveExchange() {
      this.$socket.emit('saveExchange', this.editingExchange);
    },
    deleteExchange(code) {
      this.$confirm('Are you sure want to delete Exchange: ' + code + '?', 'Delete confirmation', {
        type: 'warning'
      }).then(() => {
        this.$socket.emit('deleteExchange', code);
        this.$message({
          type: 'success',
          message: 'Delete completed'
        });
        this.getExchanges();
      });
    }
  },
  socket: {
    events: {
      getExchanges(pager, curPage) {
        if (this.exchangePager.curPage == curPage) {
          this.exchangePager.pageSize = Number(pager.pageSize);
          this.exchangePager.total = pager.total;
          this.exchangePager.curPage = pager.curPage;
          this.exchangePager.items = pager.items;
          this.reflush();
        }
      },
      getHeaderSettings(options) {
        for (let option of options) {
          if (option && option.key && this[option.key]) {
            try {
              this[option.key] = JSON.parse(option.value);
            } catch (err) {
              console.log(err);
            }
          }
        }
      },
      save(status) {
        if (status) {
          this.closeDialog()
        } else {
          this.saving = false;
        }
      },
      getPageSize(pageSize) {
        if(pageSize){
          this.exchangePager.pageSize = Number(pageSize);
        }
        else {
          this.exchangePager.pageSize = defPageSize;
        }
        this.changeExchangeCurPage(1);
      }
    }
  },
  created() {
    //do something after creating vue instance
    this.getHeaderSettings();
    this.populateTypes();
    this.getPageSize(this.pageSizeIndex);
    this.getExchanges();
  }
}
</script>

如果您有解决方案，请发表评论。 谢谢：）