问题
I can't get the html field that fires the event in its event handler (in javascript is the event.target
).
I've a form with:
- an input element attached to a function on change event
- a function that manages the change event
My code is like the following:
var Main = {
methods: {
change(par) {
console.log("The value is: " + par);
//HERE I can't get "event.target"
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.0-beta.1/lib/index.js"></script>
<div id="app">
<template>
<el-input @change="change" placeholder="Input something here"/>
</template>
</div>
I know I can call different functions, and in each one I know who is the relative input, but I'd like to use a common one.
Following the stacktrace I saw in element-ui.common.js
the code of event fire:
handleChange: function handleChange(event) {
this.$emit('change', event.target.value);
},
And there element
passes just the value to the event handler.
Anyway, any idea to get the event.target
, please?
Thanks
回答1:
You can use @input.native
var Main = {
methods: {
change(event) {
console.log("The value is: " + event.target.value);
//HERE I can't get "event.target"
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.0-beta.1/lib/index.js"></script>
<div id="app">
<template>
<el-input @input.native="change" placeholder="Input something here"/>
</template>
</div>
回答2:
It looks like Element UI just eats the event and returns only the value. What you could do instead of @change(change)
is @keyup.native(change)
and then your par
parameter will be the event rather than just the value.
来源:https://stackoverflow.com/questions/47873386/vue-js-element-ui-get-event-target-at-change