vue组件表单数据回显验证及提交的实例代码
程序员文章站
2022-07-22 17:42:58
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。
代码如下：
...
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。
代码如下：
<template>
<div class="index">
<!--header-bar></header-bar-->
<div style="margin:20px;">
<div class="item">
<p>住户名称:</p>
<p>
<input type="text" value="username" v-model="formstatus.username" placeholder="输入名称">
</p>
</div>
<div class="item">
<p>住户类型:</p>
<p>
<label v-for="(item, index) in zhuhutype">
<span>{{item.name}}</span>
<input type="radio" name = "zhuhutype" :value="item.id" :checked="item.ischecked" @click="changezh(index)" v-model="formstatus.zhuhutype">
</label>
</p>
</div>
<div class="item">
<p>设备名称:</p>
<p>
<label v-for="(item, index) in shebeitype">
<span>{{item.name}}</span>
<input type="checkbox" :value="item.id" :checked="item.ischecked" @click="changesb(index)" v-model="formstatus.shebeitype">
</label>
</p>
</div>
<div class="item">
<p>住户大小:</p>
<p>
<select v-model="formstatus.zhuhudaxiao">
<option value="0">请选择</option>
<option v-for="option in zhuhudaxiao" v-model="zhuhudaxiao" :id = "option.id" :value="option.value" >{{option.name}}</option>
</select>
</p>
</div>
<div class="item">
<p>住户留言:</p>
<p>
<textarea value="userword" v-model="formstatus.userword"></textarea>
</p>
</div>
</div>
<p style="margin:20px 0;"><button @click="save">点击保存</button></p>
</div>
</template>
<script>
import vue from 'vue'
import axios from 'axios';
import elementui from 'element-ui'
import url from '../utils/tools/url.js'
import 'element-ui/lib/theme-chalk/index.css'
vue.use(elementui)
import headerbar from '../modules/headerbar.vue';
export default {
name: 'index',
data (){
return {
zhuhutype: [],
shebeitype: [],
zhuhudaxiao: [],
//绑定改变后的表单值用于提交
formstatus: {
username: "",
zhuhutype: 43,
shebeitype: [52, 23],
zhuhudaxiao: "",
userword: ""
}
}
},
components: { headerbar },
methods: {
getpage (currentpage){
console.log(currentpage);
// this.$http.get("http://192.168.1.200/test.php").then(res=>{
// console.log(res.data);
// });
},
handleedit(index, row) {
console.log(index, row);
},
handledelete(index, row) {
console.log(index, row);
},
save(){
if(this.formstatus.username == ""){
alert("输入名称");
return false;
}
console.log(typeof(this.formstatus.zhuhutype));
if(typeof(parseint(this.formstatus.zhuhutype)) != "number"){
alert("输入住户类型");
return false;
}
if(this.formstatus.shebeitype.length == 0 ){
alert("输入设备名称");
return false;
}
if(this.formstatus.zhuhudaxiao == 0){
alert("选择住户大小");
return false;
}
if(this.formstatus.userword == ""){
alert("输入用户留言");
return false;
}
console.log(this.formstatus);
console.log("####用户名称####");
console.log(this.formstatus.username);
console.log("####住户类型####");
console.log(this.zhuhutype);
console.log("####设备名称####");
console.log(this.shebeitype);
console.log("####住户大小####");
console.log(this.userdxselected);
console.log("####用户留言####");
console.log(this.userword);
},
//住户类型改变数据
changezh(index){
this.zhuhutype.foreach(function(value, index){
value.ischecked = false;
});
this.zhuhutype[index].ischecked = true;
},
//设备选择改变数据
changesb(index){
console.log(index);
this.shebeitype[index].ischecked = !this.shebeitype[index].ischecked;
}
},
created () {
console.log("############");
//用户名称
this.formstatus.username = "用户名称返回的内容";
//循环住户类型
this.zhuhutype = [{
name: '小型住户',
id: '12',
ischecked: false
},{
name: '中型住户',
id: '43',
ischecked: false
},{
name: '大型住户',
id: '72',
ischecked: true
},{
name: '超大型住户',
name: '设备6',
id: '25',
ischecked: false
}];
//循环设备名称
this.shebeitype = [{
name: '设备1',
id: '22',
ischecked: true
},{
name: '设备2',
id: '23',
ischecked: false
},{
name: '设备3',
id: '52',
ischecked: true
},{
name: '设备6',
id: '65',
ischecked: false
}];
//住户大小
this.zhuhudaxiao = [{
name: "100平米",
id: 1,
value: 1
},{
name: "80平米",
id: 2,
value: 2
},{
name: "70平米",
id: 3,
value: 3
}];
//住户大小
this.formstatus.zhuhudaxiao = 2;
//用户名称
this.formstatus.userword = "用户留言返回的内容";
// axios.get("/test.php").then(res=>{
// this.table = this.table.concat(res.data.data);
// console.log(res.data);
// });
}
}
</script>
<style>
select{height:40px;width:100px;}
.el-button--mini, .el-button--mini.is-round{}
*{margin:0;padding:0;font-family:"微软雅黑";}
button{height:40px;width:100px;margin-left:20px;}
.item p{padding:10px 0;}
.table, .page{
width:900px;
height:auto;
margin:20px auto;
}
label{
padding:10px 20px;
margin:10px;
border:1px solid #eee;
}
body{padding-top:80px;}
.header{
position:fixed;
top:0;
width:100%;
background:#eee;
}
.header ul{
height:80px;
width:1000px;
}
.header ul li{
float:left;
width:200px;
font-size:14px;
line-height:80px;
text-align:center;
}
.header ul li a{
display:block;
}
</style>