vue watch监听对象
校验表单必填项是否全部已填,提交按钮在必填项全部已填状态下才可点击export default {data(){return{companyName:"", //公司名称companyAddress:"", //公司地址uploadPhotos:"", //营业执照btnState:false /...
·
校验表单必填项是否全部已填,提交按钮在必填项全部已填状态下才可点击
export default {
data(){
return{
companyName:"", //公司名称
companyAddress:"", //公司地址
uploadPhotos:"", //营业执照
btnState:false //提交按钮状态
}
},
computed: {
companyInfo() {
const { companyName,companyAddress,uploadPhotos} = this
return {
companyName,
companyAddress,
uploadPhotos,
}
},
},
watch:{
companyInfo: {
handler: function(newval , oldval) {
if(Object.keys(this.filterParams(newval)).length == 3){ //判断已输入的值与必填项数量是否一致,如果一致则可点击下一步,否则按钮状态为不可点击
this.btnState = true;
}else{
this.btnState = false;
}
},
deep: true
},
},
methods: {
//删除对象中的空值
filterParams(obj){
let _newPar = {};
for (let key in obj) {
//如果对象属性的值不为空,就保存该属性(这里我做了限制,如果属性的值为0,保存该属性。如果属性的值全部是空格,属于为空。)
if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
//记录属性
_newPar[key] = obj[key];
}
}
//返回对象
return _newPar;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)