美文网首页
搜狗输入法导致的vue-element 输入框组件不好使的情况

搜狗输入法导致的vue-element 输入框组件不好使的情况

作者: 张小海_d117 | 来源:发表于2020-06-17 14:22 被阅读0次

    这是一个简单的不能再简单的,朴实的不能再朴实的vue-element的输入框。然后很朴实的给加上事件.

    <el-input v-model="scope.row.price" placeholder="单价" 
    @input="priceinput(scope.row)" 
    @change="amountchange(scope.row)" 
    onkeyup="this.value=this.value.replace(/[^\d.-]/g,'');"
    ></el-input>
    

    然后测试同学测出了神奇的一幕,就是被他们这么搞一下


    image.png

    ,然后scope.row传出去的值就不联动了,item.price 就不变了,怎么回事了,先想怎么解决吧,用js原生的事件吧,然后对比一下原生事件里面的值和item就是vue传回来的值,如果不一样就用原生事件里面的。

    <el-input v-model="scope.row.price" placeholder="单价" 
    @input.native="priceinput(scope.row)" 
    @change.native="amountchange(scope.row,$event)" 
    onkeyup="this.value=this.value.replace(/[^\d.-]/g,'');"
    ></el-input>
    
    amountchange(item,e){
          // console.log(e?e.target.value:"非原生",item.price)
          if( e ){
            if( e.target.value !== item.price ){
              item.price = e.target.value;
            }
          }
    }
    

    然后就解决了

    具体我得出一个小例子,第一次在简书写东西,不知道能不能回来修改,不能改就再写一篇。

    相关文章

      网友评论

          本文标题:搜狗输入法导致的vue-element 输入框组件不好使的情况

          本文链接:https://www.haomeiwen.com/subject/wucsxktx.html