vue+elementUI 求助！！！好兄弟们在线等

[支付宝转账20r看蟹黄堡配方]

Invalid prop: type check failed for prop "value". Expected String, Number, got Boolean with value false.


vue警告

代码如下

<template>
  <div>
    <el-table style="width: 50%;margin: 0 auto"
              :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="用户名" prop="fields.username" width="180"></el-table-column>
      <el-table-column label="邮箱" prop="fields.email" width="180"></el-table-column>
      <el-table-column label="加入时间" prop="fields.date_joined" width="180"></el-table-column>
      <el-table-column>
        <template v-slot="scope">
          <el-button icon="el-icon-edit" @click="view(scope.row)"  type="text" size="small">编辑</el-button>
          <el-button icon="el-icon-delete" @click="deleteUser(scope.row.pk)"  type="text" size="small">删除</el-button>
          <el-dialog title="详细信息" :visible.sync = "centerDialogVisible" width="30%" center>
            <el-form v-model="form" label-width="80px" label-position="left" :rules="rules" ref="form">
              <el-form-item label="用户ID:" >
                <el-input v-model="form.pk" style="width: 50%" size="mini" disabled></el-input>
              </el-form-item>
              <el-form-item label="用户名:" prop="username">
                <el-input v-model="form.username" style="width: 50%" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="邮箱:" prop="email">
                <el-input v-model="form.email" style="width: 50%" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="管理员:">
                <el-input v-model="form.is_superuser" style="width: 50%" size="mini" disabled></el-input>
              </el-form-item>
              <el-form-item label="注册日期:">
                <el-input v-model="form.date_joined" style="width: 50%" size="mini" disabled></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateUser(form)">提 交</el-button>
            </span>
          </el-dialog>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                    :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="userList.length">
    </el-pagination>
  </div>
</template>

<script>
import Axios from 'axios'
import QS from 'qs'

export default {
  name: 'admin',
  data () {
    const cn = new RegExp(/[\u4e00-\u9fa5]/)
    const reg2 = new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)
    const emailCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else {
        if (!reg2.test(value)||cn.test(value)) {
          callback(new Error('错误的邮箱格式'))
        }
        callback()
      }
    }
    const reg1 = new RegExp(/^[0-9A-Za-z]+$/)
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('用户名不能为空'))
      }
      setTimeout(() => {
        if (!reg1.test(value)) {
          callback(new Error('必须包含字母和数字'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      userList: [],
      currentPage: 1,
      pagesize: 10,
      centerDialogVisible: false,
      form: {
        pk: 0,
        username: '',
        email: '',
        is_superuser: false,
        date_joined: ''
      },
      rules:{
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
        email: [
          { validator: emailCheck, trigger:'blur'}
        ]
      }
    }
  },
  mounted () {
    this.showUser()
  },
  methods: {
 
    view (row) {
      this.form.pk = row.pk
      this.form.username = row.fields.username
      this.form.email = row.fields.email
      this.form.date_joined = row.fields.date_joined
      this.form.is_superuser = row.fields.is_superuser
      this.centerDialogVisible = true
    },

    updateUser(form){
      console.log(form)
      Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
      const _this = this
      this.$confirm('此操作将修改用户信息, 是否继续提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        Axios.post('http://127.0.0.1:8000/api/updateUser', QS.stringify({id:form.pk,email:form.email,username:form.username}))
          .then((response) => {
            const res = response.data
            console.log(res)
            if (res.status === 0) {
              _this.$message({
                type: 'success',
                message: '修改成功!'
              });
              _this.centerDialogVisible = false
              _this.showUser()
            } else {
              this.$message.error('编辑用户信息失败')
              console.log(res.msg)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>

有两个问题 一个是el-dialog标签的 :visible.sync绑定问题 一个是element ui 表单校验问题

先说第一个问题

visible绑定我通过 view()控制 true 和 false 控制台报错 但是可以正常使用 view方法中删除this.centerDialogVisible = true 后不再报错。

这里我修改使用 0和1时它又会报错说我未使用 boolen

有没有大佬知道该怎么修改


第二个问题是表单校验问题
具体如下
应该是value值未传入 但是我也找不到解决方法



在线等 急

[gqkmiss]

Invalid prop: type check failed for prop "value". Expected String, Number, got Boolean with value false. 这个是说明你的参数 应该是Number/String，但是你给了一个Boolean 你把这个值改成 字符串，'true'/'false'，或者把input 改成 checkbox

[支付宝转账20r看蟹黄堡配方]

引用 1 楼 gqkmiss 的回复:

Invalid prop: type check failed for prop "value". Expected String, Number, got Boolean with value false. 这个是说明你的参数 应该是Number/String，但是你给了一个Boolean 你把这个值改成 字符串，'true'/'false'，或者把input 改成 checkbox

非常感谢好兄弟 还有表单校验的问题能帮我看看嘛

[gqkmiss]

引用 2 楼 共產主義接班人 的回复:

[quote=引用 1 楼 gqkmiss 的回复:]Invalid prop: type check failed for prop "value". Expected String, Number, got Boolean with value false. 这个是说明你的参数 应该是Number/String，但是你给了一个Boolean 你把这个值改成 字符串，'true'/'false'，或者把input 改成 checkbox

非常感谢好兄弟 还有表单校验的问题能帮我看看嘛[/quote] 是 :model="form"，不是v-model，把v-model改成:model就行了