Element el-input第一次输入的时候失效从第二个输入展示

Question

问题描述

el-input文本框输入的第一位被吃掉了，从第二位开始（复制粘贴的也是如此第一次粘贴不生效，再次粘贴显示）该问题只有在页面初始化的时候第一次输入会有问题，触发过一次后就输入正常了

问题出现的环境背景及自己尝试过哪些方法

例：输入235，页面input展示35
尝试：1，第一次输入能监控到触发了键盘事件但文本框没显示

 2，查找方法使用@input触发强制刷新this.$forceUpdate(),没生效
 3, 查找方法将v-if改成v-show也没生效
    ![image.png](/img/bVcZVlM)

相关代码

粘贴代码文本（请勿用截图）
<template>
<div v-show="type === 'input'" class="main-cont">

      <el-input
        class="input-style"
        type="text"
        size="mini"
        placeholder="请输入"
        v-model.trim="keyword"
        @keyup.native="inpChange($event,keyword)"
        @keyup.enter.native="confirmHandle" />

</div>
</template>
<script>
export default {
name: 'tableFilter',
data() {

return {
   keyword:''
}

},
methods: {
inpChange(event,val) {

  console.log('---event---',event)
  this.$forceUpdate();

}
}

}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

希望文本框正常使用，实际是无效果

Answer 1

可能是.trim 修饰符造成的问题，试试把它去掉换成@blur="keyword = keyword.trim()"

Answer 2

找到根本问题了，在我初始的vue页面里面初始化有个e.preventDefault()阻止默认行为进行重写输入了导致input的v-model第一次执行时的change事件冲突了，大概是这么理解的，具体是看到了一篇帖子描述https://www.5axxw.com/questio...