- 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指令或自定义验证器来绑定到表单输入的值。以下是一些可能导致无法绑定值的情况以及相应的解决方案:- 未定义或未初始化的
v-model绑定:如果你在v-model绑定之前没有定义或初始化v-model,或者在v-model的属性中没有提供@input、@change、@error等属性,那么v-model的绑定将无法成功。例如:
```html
```
在上面的代码中,我们定义了一个
validateName方法,它在表单提交前检查name输入的长度是否在有效范围内。如果长度小于3,我们设置一个错误提示;否则,我们执行验证逻辑(在此示例中,我们假设name的值在用户输入范围内),并显示错误提示。- 自定义验证器未绑定到
v-model:如果你定义了一个自定义的验证器,但没有将其绑定到v-model,那么v-model的绑定将无法成功。例如:
```html
```
在上面的代码中,我们创建了一个名为
validateName的自定义验证器,它包含一个required属性,用于指示表单必填字段。然后,我们将自定义验证器绑定到v-model的name属性,这意味着在表单提交前,name的值必须满足自定义验证器的条件。v-model指令的@input属性未绑定:@input属性用于指定表单输入的数据类型。如果你的表单输入类型是text或number等非数字类型,那么@input属性可能无法绑定到表单的值。例如:
```html
```
在上面的代码中,我们使用了
@input属性来指定name的输入类型为number。这意味着name必须是一个数字,否则@input属性将无法绑定到表单的值。如果上述方法都无法解决问题,可能需要检查表单输入的具体格式和你使用的
v-model绑定方式。在某些情况下,可能需要在自定义验证器中添加额外的逻辑来处理非数字类型的数据,或者在表单输入验证前对name的格式进行更严格的验证。 - 未定义或未初始化的
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
