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

Question

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);
            }

        }
    }
}

Answer 1

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

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

Answer 2

如果你想输入一个，就马上改变的话，用input事件吧！<el-input v-model="value" v-on:input="change" type="number"></el-input>，另外，
，你这个写法，这个参数是多余的，可以去掉

Answer 3

我用el-ui也遇到过同样的问题。我觉得是这样的哦
首先el-input是一个组件，并不是input标签。而你的change事件监听的是el-input的整个组件。即图中的div元素。

所以要解决这个问题的方法就是原生的input，再加上el-ui的class：el-input__inner就可以了哦

Answer 4

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组件能不能用

Answer 5

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

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

        }

Answer 6

试验后楼上好使