CODEWITHSUNDEEP
vue.jsuser-inputelement-ui
Lê Quang Bảo
Lê Quang Bảo

Reputation: 2870

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

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

Upvotes: 0

Views: 4280

Answers (3)

Shuyi
Shuyi

Reputation: 916

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.

Upvotes: 2

Pallamolla Sai
Pallamolla Sai

Reputation: 2493

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

Upvotes: 0

Vaibhav
Vaibhav

Reputation: 658

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.

Upvotes: 0

Related Questions