账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    iview做表单验证时无法绑定到值
    52
    0

    iview 做表单验证时无法绑定值问题类似https://segmentfault.com/q/10...
    但是我的prop和v-model绑定的字段是一致的,代码如下:

    <template>
      <div>
        <div id="searchDiv">
          <strong>姓名:</strong><Input size="small" v-model="searchData.name" style="width: 150px"></Input>
          <strong>电话:</strong><Input size="small" v-model="searchData.phone" style="width: 150px"></Input>
          <Button size="small" style="margin-left: 20px" @click="updateTable" type="primary" icon="ios-search">搜索</Button>
        </div>
        <div style="margin: 10px">
          <Button size="small" @click="modal = true" style="margin-left: 5px" type="primary" icon="person-add">新增</Button>
        </div>
        <Table border :columns="columns" :data="data"></Table>
        <Page style="margin-top: 10px" @on-change="pageChange" @on-page-size-change="sizeChange" :total="pageInfo.total" :current="pageInfo.page" :page-size="pageInfo.size" show-sizer show-elevator show-total></Page>
        <Modal
          v-model="modal"
          title="用户信息"
          @on-ok="ok"
          @on-cancel="cancel">
          <Form ref="customerEdit" :model="customerInfo" :label-width="80" :rules="formRules">
            <FormItem prop="name" label="姓名">
              <Input type="text"  v-model="customerInfo.name" placeholder="输入用户姓名"></Input>
            </FormItem>
            <FormItem label="性别">
              <RadioGroup v-model="customerInfo.gender">
                <Radio label="0">女</Radio>
                <Radio label="1">男</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="电话号码">
              <Input  v-model="customerInfo.phone" placeholder="输入手机号码"></Input>
            </FormItem>
            <FormItem label="地址">
              <Input  v-model="customerInfo.address" placeholder="输入地址"></Input>
            </FormItem>
            <FormItem label="生日">
              <DatePicker  format="yyyy-MM-dd" @on-change="dateSet" :value="customerInfo.birth" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
            </FormItem>
          </Form>
        </Modal>
      </div>
    </template>
    <script>
      import index from "../router";
    
      export default {
        data () {
          return {        
            modal:false,
            customerInfo:{
              name:'',
              gender:'',
              phone:'',
              address:'',
              birth:''
            },
            formRules:{
              name:[
                {required:true,type:'string',message:'用户姓名不能为空',trigger:'blur'}
              ]
            }
          }
        },
        methods: {
          show (index) {
            //this.customerInfo=JSON.parse(JSON.stringify(this.data[index]));
            this.customerInfo=this.data[index];
            this.modal=true;
          },
          remove (index) {
            this.customerInfo=JSON.parse(JSON.stringify(this.data[index]));
            this.customerInfo.isdelete=1;
            this.ok();
          },
          ok(){
            console.log(this.customerInfo);
            this.$refs['customerEdit'].validate((valid)=>{
              if (valid){
                this.$ajax.post(
                  '/customer/addOrUpdate',
                  this.customerInfo
                ).then((response)=>{
                  if (response.data.success){
                    this.$Message.success(response.data.message);
                  }
                });
                this.updateTable();
              }
            });
            this.$refs['customerEdit'].resetFields();
            this.customerInfo={};
          },
          cancel (){
            this.$refs['customerEdit'].resetFields();
            this.customerInfo={};
          },
          dateSet(date){
            this.customerInfo.birth=date;
          },
          pageChange (page){
            this.pageInfo.page=page;
            this.updateTable();
          },
          sizeChange (size){
            this.pageInfo.size=size;
            this.updateTable();
          },
          updateTable(){
            this.$ajax.post('/customer/getCustomerPageData',{
              name:this.searchData.name,
              phone:this.searchData.phone,
              page:this.pageInfo.page,
              size:this.pageInfo.size
            }).then((response)=>{
              if (response.data.success){
                this.data=response.data.data.list;
                this.pageInfo.total=response.data.data.total;
                this.pageInfo.page=response.data.data.pageNum;
                this.pageInfo.size=response.data.data.pageSize;
              }
            });
          }
        },
        mounted:function () {
          this.$nextTick(()=>{
          this.updateTable();
          });
        }
      }
    </script>
    <style scoped>
      #searchDiv{
        margin: 20px;
      }
    
    </style>
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 等待你出现╮ 普通会员 1楼

      在iview中,表单验证可以使用v-model指令或自定义验证器来绑定到表单输入的值。以下是一些可能导致无法绑定值的情况以及相应的解决方案:

      1. 未定义或未初始化的v-model绑定:如果你在v-model绑定之前没有定义或初始化v-model,或者在v-model的属性中没有提供@input@change@error等属性,那么v-model的绑定将无法成功。例如:

      ```html

      ```

      在上面的代码中,我们定义了一个validateName方法,它在表单提交前检查name输入的长度是否在有效范围内。如果长度小于3,我们设置一个错误提示;否则,我们执行验证逻辑(在此示例中,我们假设name的值在用户输入范围内),并显示错误提示。

      1. 自定义验证器未绑定到v-model:如果你定义了一个自定义的验证器,但没有将其绑定到v-model,那么v-model的绑定将无法成功。例如:

      ```html

      ```

      在上面的代码中,我们创建了一个名为validateName的自定义验证器,它包含一个required属性,用于指示表单必填字段。然后,我们将自定义验证器绑定到v-modelname属性,这意味着在表单提交前,name的值必须满足自定义验证器的条件。

      1. v-model指令的@input属性未绑定:@input属性用于指定表单输入的数据类型。如果你的表单输入类型是textnumber等非数字类型,那么@input属性可能无法绑定到表单的值。例如:

      ```html

      ```

      在上面的代码中,我们使用了@input属性来指定name的输入类型为number。这意味着name必须是一个数字,否则@input属性将无法绑定到表单的值。

      如果上述方法都无法解决问题,可能需要检查表单输入的具体格式和你使用的v-model绑定方式。在某些情况下,可能需要在自定义验证器中添加额外的逻辑来处理非数字类型的数据,或者在表单输入验证前对name的格式进行更严格的验证。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部