【Vue】element中的el-input组件中change事件中修改v-model的值不会生效？

element中的el-input组件中change时间中修改v-model的值不会生效？

<el-input v-model="value" v-on:change="change" type="number"></el-input>
export default{
data() {
return {
value: ''
}
},
methods: {
change(value) {
// 目的是去掉输入框中的小数点
if (this.value) {
this.value = parseInt(value);
}
}
}
}

回答

然鹅，楼上两位的回答并不会达到楼主想要的效果，如果仅仅是把小数粘贴到输入框，是可以去掉小数点的，但实时输入就不行了。还需要加 $nextTick：

change() {
  // 目的是去掉输入框中的小数点
  if (this.value) {
    this.$nextTick(() => {
      this.value = parseInt(this.value);
    })
  }
}

如果你想输入一个，就马上改变的话，用input事件吧！<el-input v-model="value" v-on:input="change" type="number"></el-input>，另外，
【Vue】element中的el-input组件中change事件中修改v-model的值不会生效？，你这个写法，这个参数是多余的，可以去掉

我用el-ui也遇到过同样的问题。我觉得是这样的哦
首先el-input是一个组件，并不是input标签。而你的change事件监听的是el-input的整个组件。即图中的div元素。
【Vue】element中的el-input组件中change事件中修改v-model的值不会生效？

所以要解决这个问题的方法就是原生的input，再加上el-ui的class：el-input__inner就可以了哦
【Vue】element中的el-input组件中change事件中修改v-model的值不会生效？

Vue.js里面可以给原生的input标签添加input事件，可以监听输入框的实时变化，包括复制粘贴

//监听input的输入，并忽略输入的非数字字符
<input v-focus v-model.trim="num" :value="num" type="tel" @input="handleChange" />
methods: {
        handleChange (){
            var t = this;
            var n = t.num.toString().replace(/[^0-9]/ig,"");
            t.num = n;
            console.log(n)
            return n;
        }
}

楼主可以试试element中的el-input组件能不能用

change事件仅会在blur后触发。
另：你change都没传value，没办法取到value。
建议改为：

change() {
            // 目的是去掉输入框中的小数点
            if (this.value) {
              this.value = parseInt(this.value);
            }
        }

试验后楼上好使

以上是 【Vue】element中的el-input组件中change事件中修改v-model的值不会生效？ 的全部内容， 来源链接： utcz.com/a/75771.html

回到顶部