How to emit value as you type in Element UI Input v2.x?

Question

This is my minimal working example, the following example uses version 2.x of element UI which we are currently using in this project.

https://codepen.io/peter-peter-the-typescripter/pen/WNGxWEB

{{ input }}
<el-input-number placeholder="Please input" :value="input" @input="onInput" />

onInput(val) {
  console.log('input', val)
  this.input = val
  this.$emit('input', val)
}

In previous version 1.x, input was able to emit value during on @change with little delay (few ms). However, it changes on v2.x. Can you tell me how to edit this code so it emits and validate the value almost immediately after I finish typing?

Is it possible to create similar behaviour what we had in version 1.x?
Check it here: https://element.eleme.io/1.4/#/en-US/component/input-number

Thank you.

Answer 1

Try this:

<el-input-number placeholder="Please input" v-model="input" @input.native="onInput" />

Instead of using v-bind, just use v-model and use native input event instead. According to this document, there is no input event, but only change event for el-input-number tag.

Link to their document: https://element.eleme.io/#/en-US/component/input-number#inputnumber

Answer 2

Because validation is not applied on input change until unfocus and v-model or v-bind not seem to working we can access input tag using DOM or ref and then validate inside our function

<el-input-number placeholder="Please input" v-model="input" :min="min" :max="max" @input.native="onInput" />

You can access input using either DOM when component mounted or you can use ref to access el-input-number component and then use that to access input.

Here i used native input event because then only i can access input changes when typed by user and apply validation on input value.

var Main = {
  data() {
    return {
      input: '',
      min: 0,
      max: 100,
    }
  },
  mounted() {
    this.maxInputLength = String(this.max);
    this.inputElem = this.$el.querySelector('.el-input__inner'); // this.$el.querySelector('input');
  },
  methods: {
    onInput(evt) {
      let val = evt.target.value;
      let integer = parseInt(val);
      if (integer >= this.max || val.length > this.maxInputLength) {
        this.inputElem.value = 100;
      }
      else if (integer == 0) {
        this.inputElem.value = 0;        
      }
      else {
        this.inputElem.value = val;
      }
      this.$emit('input', val);
    },
  }
}

Answer 3

Why not using the validation framework provided with element-ui, which supports validations on input?

var Main = {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: 'Please input Activity name', trigger: 'change' },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
  <el-form-item label="Activity name" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
    <el-button @click="resetForm('ruleForm')">Reset</el-button>
  </el-form-item>
</el-form>
</div>