最近做项目,vue中,挂载函数只执行一次,一点其他按钮,我这个页面的银行和网点的数据不存在以及css不可选的样式就失效了,因此做一下总结:
页面:(这是默认效果,不应该随着挂载函数失效而改变)
首先是我的挂载函数mounted:
//挂载函数,执行一次
mounted() {
this.getCom()
},
这是method方法里的getCom方法:
methods: {
//根据角色类型设置银行条件框和网点条件框可选不可选
getCom() {
if (getBusiRoles()[0].code == 'YHJS') {
let ucode = 0
switch (getUserUnitCode()) {
case '01':
ucode = '中国农业银行'
break
case '02':
ucode = '中国建设银行'
break
case '03':
ucode = '中国银行'
break
case '04':
ucode = '中国工商银行'
break
case '05':
ucode = '广发银行'
break
case '06':
ucode = '东莞银行'
break
case '10':
ucode = '光大银行'
break
case '11':
ucode = '农商银行'
break
case '12':
ucode = '浦发银行'
break
case '13':
ucode = '邮储银行'
break
}
this.$refs.aaz065_ref.$props.placeholder = ucode
this.$refs.aaz065_ref.$props.disabled = true
this.yhjs_yh = ucode
} else if (getBusiRoles()[0].code == 'WDJS') {
debugger
getYHZL({ code: getUserUnitCode() })
.then(res => {
this.$refs.aaz065_ref.$props.placeholder = res.data[0].fkyhmc
this.$refs.aaz065_ref.$props.disabled = true
this.$refs.wdbh_ref.$props.value = res.data[0].fkwdmc
this.$refs.wdbh_ref.$props.disabled = true
this.wdjs_yh = res.data[0].fkyhmc
this.wdjs_wd = res.data[0].fkwdmc
})
.catch(err => {
this.$message.error('无法找到对应银行网点')
})
}
}
这里面的yhjs_yh,wdjs_yh,wdjs_wd三个都是为了可以实现跨函数调用,所以在export default{data(){return{}}}
里面定义了三个变量,实现跨函数调用:
yhjs_yh: '',
wdjs_yh: '',
wdjs_wd: ''
接着要解决问题的关键就是使用updated函数(这是百度出来的,具体原因尚未深究),通过这个函数可以解决挂载函数mounted只执行一次丢失数据问题:
updated() {
if (getBusiRoles()[0].code == 'YHJS') {
this.$refs.aaz065_ref.$props.placeholder = this.yhjs_yh
this.$refs.aaz065_ref.$props.disabled = true
} else if (getBusiRoles()[0].code == 'WDJS') {
this.$refs.aaz065_ref.$props.placeholder = this.wdjs_yh
this.$refs.aaz065_ref.$props.disabled = true
this.$refs.wdbh_ref.$props.value = this.wdjs_wd
this.$refs.wdbh_ref.$props.disabled = true
}
},
完整代码如下:
export default{
data(){
return{
yhjs_yh: '',
wdjs_yh: '',
wdjs_wd: ''
}
}
//挂载函数,执行一次
mounted() {
this.getCom()
},
//解决mounted挂载函数只执行一次,做其他操作会丢失数据的问题
updated() {
if (getBusiRoles()[0].code == 'YHJS') {
this.$refs.aaz065_ref.$props.placeholder = this.yhjs_yh
this.$refs.aaz065_ref.$props.disabled = true
} else if (getBusiRoles()[0].code == 'WDJS') {
this.$refs.aaz065_ref.$props.placeholder = this.wdjs_yh
this.$refs.aaz065_ref.$props.disabled = true
this.$refs.wdbh_ref.$props.value = this.wdjs_wd
this.$refs.wdbh_ref.$props.disabled = true
}
},
methods: {
//根据角色类型设置银行条件框和网点条件框可选不可选
getCom() {
if (getBusiRoles()[0].code == 'YHJS') {
let ucode = 0
switch (getUserUnitCode()) {
case '01':
ucode = '中国农业银行'
break
case '02':
ucode = '中国建设银行'
break
case '03':
ucode = '中国银行'
break
case '04':
ucode = '中国工商银行'
break
case '05':
ucode = '广发银行'
break
case '06':
ucode = '东莞银行'
break
case '10':
ucode = '光大银行'
break
case '11':
ucode = '农商银行'
break
case '12':
ucode = '浦发银行'
break
case '13':
ucode = '邮储银行'
break
}
this.$refs.aaz065_ref.$props.placeholder = ucode
this.$refs.aaz065_ref.$props.disabled = true
this.yhjs_yh = ucode
} else if (getBusiRoles()[0].code == 'WDJS') {
debugger
getYHZL({ code: getUserUnitCode() })
.then(res => {
this.$refs.aaz065_ref.$props.placeholder = res.data[0].fkyhmc
this.$refs.aaz065_ref.$props.disabled = true
this.$refs.wdbh_ref.$props.value = res.data[0].fkwdmc
this.$refs.wdbh_ref.$props.disabled = true
this.wdjs_yh = res.data[0].fkyhmc
this.wdjs_wd = res.data[0].fkwdmc
})
.catch(err => {
this.$message.error('无法找到对应银行网点')
})
}
}
}