VueJs + Element-ui: how to get native event from input

Question

I am trying to get the event from the @input.native attribute of a el-input tag. Here the template code:

<el-input :value="filter.name" @input.native="updateFilter"></el-input>

And the script code:

updateFilter (e) {
  console.log(e.target.value)
}

My filter.name has been initialized with value "aaa", then I type "b" in the field. For some reason, the output on the log is "aaa" but I need the "aaab" value instead.

Also I can't use @input because it return only the value, I need other attributes too.

Are there anyway to get the valid native input event?

@Update: I am using Vuex so v-model is not an option

Normally you can use v-model but if you want to pass events then above link might help — Pallamolla Sai
– Pallamolla Sai, Commented Mar 6, 2019 at 5:19
I didn't want to add a lot of detail but I am using Vuex here so v-model is not an option. — Lê Quang Bảo
– Lê Quang Bảo, Commented Mar 6, 2019 at 7:01
Have you gone through the above link which i mentioned which tells how to listen to events using native input? — Pallamolla Sai
– Pallamolla Sai, Commented Mar 6, 2019 at 7:48
I've tried the link and it not working at all, or should I say, it only return the value rather than the event. I quite sure that your solution definitely working with other UI framework, but this stupid element-ui is something else. — Lê Quang Bảo
– Lê Quang Bảo, Commented Mar 6, 2019 at 7:50

Shuyi · Accepted Answer · 2019-03-07 22:38:17Z

2

let's just do v-model with Vuex, and it is very simple :

export default : {
...
computed : {
   filter : {
    get () { return this.$store.state.filter; };
    set (val) { this.$store.commit("setFilter", val);
  }
}
...
}

And then v-model onto filter will be magical.

answered Mar 7, 2019 at 22:38

Shuyi

9162 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pallamolla Sai · Accepted Answer · 2019-03-06 08:23:57Z

0

You can use computed method. Take one temporary variable and add that variable as v-model to your input. Whenever value is changing assign that variable to vuex store variable(nothing but string concatenation). You can use setters and getters in computed.

Following link might help.

assigning value to vuex store variable using computed setters and getters

answered Mar 6, 2019 at 8:23

Pallamolla Sai

2,5131 gold badge16 silver badges14 bronze badges

Comments

Vaibhav · Accepted Answer · 2019-03-06 04:52:53Z

0

I believe you are doing everything right. However, the value can't get updated unless you bind the model (using v-model="filter.name") instead of doing :value.

Here is what I did:

HTML

<el-input 
  class="small" 
  controls-position="right" 
  :value="someValue" 
  @input.native="someFunction">
</el-input>

Script

<script>
    export default {
        name: "CustomizeSmtCampaign",
        data: function () {
            return {
                someValue: 'test'
            }
        },
        methods: {
            someFunction: function (val = '1') {
                console.log('Event Value', val.target.value, '  some value: ', this.blankValue);
            }
        }
    }
</script>

Output

This is the output I got on console as I typed

Event Value teste   some value:  test 
Event Value tester   some value:  test 
Event Value testere   some value:  test 
Event Value testerer   some value:  test 
Event Value testerere   some value:  test

So your code must be working.

What is wrong, then?

What's wrong is that you are binding to the value, not to the model.

When I changed the :value="someValue" to v-model="someValue", the following was the output:

v-model Output

Event Value teste   some value:  teste 
Event Value tester   some value:  tester 
Event Value testere   some value:  testere 
Event Value testeree   some value:  testeree 
Event Value testereer   some value:  testereer 
Event Value testereere   some value:  testereere

Summary

Always bind the value using v-model (not using :value). That's how Vue achieves the reactiveness!

Hope that helped.

answered Mar 6, 2019 at 4:52

Vaibhav

6586 silver badges11 bronze badges

2 Comments

Lê Quang Bảo Over a year ago

I am using Vuex here, so binding with v-model is not an option

Vaibhav Over a year ago

why not? You can do

data: function () {             return {                 someValue: this.$store.getters.someValue             }         }

in the component you need the value.

Collectives™ on Stack Overflow

VueJs + Element-ui: how to get native event from input

3 Answers 3

Comments

Comments

HTML

Script

Output

v-model Output

Summary

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

HTML

Script

Output

v-model Output

Summary

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related