vue + element 复选框绑定v-model 要怎么做到绑定数据和传值

Question

页面是一个添加和编辑的复用页面 怎么才能和v-model的值绑定，我写的代码只能在编辑的时候读取数据回选，点击保存就会提示格式错误，而添加的时候不能选中

<el-form-item prop="isBanOverstrp">
          <template>
            <el-checkbox v-model="processInfo.isBanOverstrp" :true-label="1" :false-label="-1">是否禁止产量录入比率大于1</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item prop="isExistSonproc">
          <template>
            <el-checkbox v-model="processInfo.isExistSonproc" :true-label="1" :false-label="-1">是否有子工序</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item prop="isProc">
          <template>
            <el-checkbox v-model="processInfo.isProc" :true-label="1" :false-label="-1">是否为生产工序</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item prop="isRequiredInput">
          <template>
            <el-checkbox v-model="processInfo.isRequiredInput" :true-label="1" :false-label="-1">是否需要录入产量</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item prop="isRequiredPlan">
          <template>
            <el-checkbox v-model="processInfo.isRequiredPlan" :true-label="1" :false-label="-1">是否需要安排计划</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item prop="isStop">
          <template>
            <el-checkbox v-model="processInfo.isStop" :true-label="1" :false-label="-1">是否停用</el-checkbox>
          </template>
        </el-form-item>

初始化

watch: {
    'visible': {
        handler: function (newVal, oldVal) {
            console.log(newVal)
            if (newVal) {
                console.log(this)
                if (this.processId && this.processId !== '') {
                    getProcessDetail(this.processId).then(res => {
                        const _data = res.data
                        console.log(_data)
                        _data.procName = String(_data.procName)
                        _data.procNumb = parseInt(_data.procNumb)
                        _data.procPeople = String(_data.procPeople)
                        _data.procPlatform = String(_data.procPlatform)
                        _data.procPrice = String(_data.procPrice)
                        _data.procSerialNumber = String(_data.procSerialNumber)
                        _data.isBanOverstrp = parseInt(_data.isBanOverstrp)
                        _data.isExistSonproc = parseInt(_data.isExistSonproc)
                        _data.isProc = parseInt(_data.isProc)
                        _data.isRequiredInput = parseInt(_data.isRequiredInput)
                        _data.isRequiredPlan = parseInt(_data.isRequiredPlan)
                        _data.isStop = parseInt(_data.isStop)
                        this.processInfo = _data
                    })
                } else {
                    this.processInfo = {
                        procName: '',
                        procNumb: '',
                        procPeople: '',
                        procPlatform: '',
                        procPrice: '',
                        procSerialNumber: '',
                        isBanOverstrp: [],
                        isExistSonproc: [],
                        isProc: [],
                        isRequiredInput: [],
                        isRequiredPlan: [],
                        isStop: []
                    }
                }
            }
        }
    }
  },

Answer 1

页面渲染的时候，你所有的checkbox绑定的字段有没有在data里初始化定义，如果没有请添加上去；
另：个人建议，将这些checkbox的字段封装一个数组，循环绑定，总比这样写更整洁利落，例如：
<el-form-item v-for="item in checkData" :key="item.key" :prop="item.key">

<template>
    <el-checkbox v-model="form[item.key]" :true-label="1" :false-label="-1">{{item.title}}</el-checkbox>
</template>

</el-form-item>