vue组件表单数据回显验证及提交的实例代码

{{item.name}}

{{item.name}}

{{option.name}}

</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,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; } <p>console.log(this.formStatus);<br /> console.log("####用户名称####");<br /> console.log(this.formStatus.username);</p> <p>console.log("####住户类型####");<br /> console.log(this.zhuhuType);</p> <p>console.log("####设备名称####");<br /> console.log(this.shebeiType);</p> <p>console.log("####住户大小####");<br /> console.log(this.userDxselected);</p> <p>console.log("####用户留言####");<br /> console.log(this.userword);<br /> },//住户类型改变数据<br /> changeZh(index){<br /> this.zhuhuType.forEach(function(value,index){<br /> value.isChecked = false;<br /> });<br /> this.zhuhuType[index].isChecked = true;<br /> },//设备选择改变数据<br /> changeSb(index){<br /> console.log(index);<br /> this.shebeiType[index].isChecked = !this.shebeiType[index].isChecked;<br /> }<br /> },created () {<br /> console.log("############");<br /> //用户名称<br /> this.formStatus.username = "用户名称返回的内容";</p> <p>//循环住户类型<br /> this.zhuhuType = [{<br /> name: '小型住户',id: '12',isChecked: false<br /> },{<br /> name: '中型住户',id: '43',{<br /> name: '大型住户',id: '72',isChecked: true<br /> },{<br /> name: '超大型住户',name: '设备6',id: '25',isChecked: false<br /> }];</p> <p>//循环设备名称<br /> this.shebeiType = [{<br /> name: '设备1',id: '22',{<br /> name: '设备2',id: '23',{<br /> name: '设备3',id: '52',{<br /> name: '设备6',id: '65',isChecked: false<br /> }];</p> <p>//住户大小<br /> this.zhuhudaxiao = [{<br /> name: "100平米",id: 1,value: 1<br /> },{<br /> name: "80平米",id: 2,value: 2<br /> },{<br /> name: "70平米",id: 3,value: 3<br /> }];</p> <p>//住户大小<br /> this.formStatus.zhuhudaxiao = 2;<br /> //用户名称<br /> this.formStatus.userword = "用户留言返回的内容";<br /> // axios.get("/test.php").then(res=>{<br /> // this.table = this.table.concat(res.data.data);</p> <p>// console.log(res.data);<br /> // });<br /> }<br /> }</p> </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> </pre> </div> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/222396.html" target="_blank">Swift基础进阶</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/439433.html" target="_blank">Ajax跨域访问MVC</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/217003.html" target="_blank">Kaldi中的L2正则化</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/40603.html" target="_blank">oracle – 列出可以访问某些表的用户</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/470918.html" target="_blank">XMLStarlet 命令行操作xml利器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/67636.html" target="_blank">sqlite3的基本用法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/467771.html" target="_blank">log4j2.xml详细配置</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/340540.html" target="_blank">react native学习笔记13——FlatList上拉加载</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/451016.html" target="_blank">c – 哪个更快,将原始数据写入驱动器或写入文件？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/504684.html" target="_blank">ruby-on-rails – bundler如何工作(一般)？</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/199315.html" target="_blank">在斯威夫特的拦截区前面有什么_下划线？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/160750.html" target="_blank">【译】深入研究Laravel的依赖注入容器</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/503739.html" target="_blank">JSON.stringify</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/220411.html" target="_blank">正则连续匹配多行</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/238670.html" target="_blank">didRegisterForRemoteNotificationsWithDeviceTo</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/430108.html" target="_blank">C#无法加载DLL(无法找到模块HRESULT：0x8007007E</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/46456.html" target="_blank">Oracle模糊查询优化小技巧</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/118030.html" target="_blank">postgresql – 为什么MVCC需要锁定DML语句</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/38535.html" target="_blank">完全卸载Oracle（亲身体验完整版）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/549854.html" target="_blank">ruby-on-rails – Paperclip,未初始化的常量Pape</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>