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>,另外,
clipboard.png,你这个写法,这个参数是多余的,可以去掉

回答:

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

所以要解决这个问题的方法就是原生的input,再加上el-ui的class:el-input__inner就可以了哦
图片描述

回答:

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

        }

回答:

试验后楼上好使

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注