iview做表单验证时无法绑定到值

Question

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>

Answer 1

你把 ref 改为 customerInfo 试下

Answer 2

性别电话号码地址这些字段你没设置对应的prop啊