vue使用element中的input组件实现传多个值和input回显强制刷新
vue使用element中的input组件实现传多个值和input回显强制刷新在项目开发过程使用input遇到的小问题,直接从element拿取过来的input组件是没问题的,但是存在着如果给input的value设置默认值,再次进行操作的时候就会获取不到value回显,无用你怎么用$set()都无济于事,后来经过查询 vue中的$forceUpdate可以强制更新表单,使用了果真奏效。顺带引出一
vue使用element中的input组件实现传多个值和input回显强制刷新
在项目开发过程使用input遇到的小问题,直接从element拿取过来的input组件是没问题的,但是存在着如果给input的value设置默认值,再次进行操作的时候就会获取不到value回显,无用你怎么用$set()都无济于事,后来经过查询 vue中的$forceUpdate可以强制更新表单,使用了果真奏效。
顺带引出一下input的@input或@change事件如何传递多个值进行相关操作,一般情况我们@input和@change都是能直接获取value的值的,我试了$event,也是过网上的其他方法,@
input="((val)=>{
priceChange(val,
'sphyrs')})"(可能写法有出入,但是我这边不奏效),后来我改成了
@input="e=>priceChange(e,'sphyrs')"这种写法,就可以成功获取到了我想要的第二个值,如果要传第三个值道理一样在
@input="e=>priceChange(e,'sphyrs','','','','','','','')"即可。下面是代码片段:
<el-input
v-model="observerData.formTable.sphyrs"
placeholder="网上参会人数"
style="width: 270px"
@input="e=>priceChange(e,'sphyrs')"
></el-input>
<!-- e不是固定的,这是一个自定义参数名称,你也可以改为value,看你个人写法 -->
<!-- 这里主要是使用箭头函数往priceChange函数里传递了多一个值 -->
priceChange(e, type) {
console.log(e, type)
if (type == 'sjhm') {
this.observerData.formTable.sjhm = e
} else if (type == 'sfzhm') {
this.observerData.formTable.sfzhm = e
} else {
this.observerData.formTable.sphyrs = e
}
this.$forceUpdate() // 强制刷新表单
},
修改前:
修改后:
结果:sphyrs就是我想要的第二个值,这么一样input获取值回显问题解决,@input和@change函数传多个参数也解决
&&&&代码不多,但是真的很实用。 如果有什么不对的地方也希望大家多多吐槽,也希望帮助到正在学习vue的朋友。&&&&
更多推荐
所有评论(0)