element单选框赋值失效问题

懒大王有S_L

已于 2024-09-09 10:03:32 修改

阅读量158

点赞数 3

文章标签： vue.js javascript 前端

于 2024-08-09 10:17:08 首次发布

本文链接：https://blog.csdn.net/qq_33301863/article/details/141054704

版权

原因

单选框的值需要返回为Number类型，后端传值是json类型会自动转为String类型，要赋值时需要把强制转为Number类型

事例

页面代码

          <el-col :span="24">
            <el-form-item label="可见范围" prop="sfqj">
                <el-radio v-model="formData.sfqj" :label="1">本局</el-radio>
                <el-radio v-model="formData.sfqj" :label="0">全局</el-radio>
            </el-form-item>
          </el-col>

方法一（推荐）

通过v-model的内置修饰符number。申明数据为数字类型

          <el-col :span="24">
            <el-form-item label="可见范围" prop="sfqj">
                <el-radio v-model.number="formData.sfqj" :label="1">本局</el-radio>
                <el-radio v-model.number="formData.sfqj" :label="0">全局</el-radio>
            </el-form-item>
          </el-col>

方法二：对应的点击事件方法，通过获取到按钮的值，进行修改成为数字类型

    showUpdateDialog(row) {
      this.formData = {...row}
      this.formData.sfqj = Number(this.formData.sfqj)
      this.dialogTitle = '修改公告内容'
      this.getFj(row.id)
      this.dialogVisible = true
    },