javascript - How to emit value as you type in Element UI Input v2.x? - Stack Overflow

admin管理员组

文章数量:1026181

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

{{ 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: .4/#/en-US/ponent/input-number

Thank you.

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/ponent/input-number

Thank you.

• javascript
• vuejs2
• element-ui
• vue-events

Share Improve this question Follow edited Dec 14, 2020 at 9:58 Irfandy J. 1,47411 gold badge2222 silver badges3838 bronze badges asked Dec 8, 2020 at 18:09 Denis StephanovDenis Stephanov 5,3413131 gold badges9595 silver badges189189 bronze badges 9

• what type of validation are you trying to achieve what was the problem you were getting can you please be specific – Chandan Commented Dec 11, 2020 at 18:11
• @Chandan element ui provide props for validation (min, max, ...), and when you unfocus input, value is validated and emited. For instance I can set on input max value 100, but I type 10000. Input validate my number and set max number by my rule, so value will be 100. This happens after I unfocus input, but I need ensure this behaviour on the fly. User should edit input and see other calculations based on entered number. – Denis Stephanov Commented Dec 11, 2020 at 18:40
• @Chandan also I edited question and add link to number input of version 1 which is my goal here – Denis Stephanov Commented Dec 11, 2020 at 20:00
• @DenisStephanov so what you need is to stop the user's input when it didn't fulfill its validation as the user types? – Irfandy J. Commented Dec 13, 2020 at 15:42
• @IrfandyJip Hi, check pls url to docs of element ui version 1.x. Number input in this versions is exactly what I need. It emits value immediately by user interaction and validate it. Version 2 emmit and validate after you go out from input – Denis Stephanov Commented Dec 14, 2020 at 9:25

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

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/ponent/input-number#inputnumber

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 ponent mounted or you can use ref to access el-input-number ponent 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);
    },
  }
}

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./[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg./vue/dist/vue.js"></script>
<script src="//unpkg./[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>

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

{{ 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: .4/#/en-US/ponent/input-number

Thank you.

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/ponent/input-number

Thank you.

• javascript
• vuejs2
• element-ui
• vue-events

Share Improve this question Follow edited Dec 14, 2020 at 9:58 Irfandy J. 1,47411 gold badge2222 silver badges3838 bronze badges asked Dec 8, 2020 at 18:09 Denis StephanovDenis Stephanov 5,3413131 gold badges9595 silver badges189189 bronze badges 9

• what type of validation are you trying to achieve what was the problem you were getting can you please be specific – Chandan Commented Dec 11, 2020 at 18:11
• @Chandan element ui provide props for validation (min, max, ...), and when you unfocus input, value is validated and emited. For instance I can set on input max value 100, but I type 10000. Input validate my number and set max number by my rule, so value will be 100. This happens after I unfocus input, but I need ensure this behaviour on the fly. User should edit input and see other calculations based on entered number. – Denis Stephanov Commented Dec 11, 2020 at 18:40
• @Chandan also I edited question and add link to number input of version 1 which is my goal here – Denis Stephanov Commented Dec 11, 2020 at 20:00
• @DenisStephanov so what you need is to stop the user's input when it didn't fulfill its validation as the user types? – Irfandy J. Commented Dec 13, 2020 at 15:42
• @IrfandyJip Hi, check pls url to docs of element ui version 1.x. Number input in this versions is exactly what I need. It emits value immediately by user interaction and validate it. Version 2 emmit and validate after you go out from input – Denis Stephanov Commented Dec 14, 2020 at 9:25

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

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/ponent/input-number#inputnumber

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 ponent mounted or you can use ref to access el-input-number ponent 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);
    },
  }
}

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./[email protected]/lib/theme-chalk/index.css");

<script src="//unpkg./vue/dist/vue.js"></script>
<script src="//unpkg./[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>

本文标签： javascriptHow to emit value as you type in Element UI Input v2xStack Overflow