javascript - Vue.js + Element UI: Get "event.target" at change - Stack Overflow

admin管理员组

文章数量:1295294

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/vue/dist/vue.js"></script>
<script src="//unpkg/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
    <el-input @change="change" placeholder="Input something here"/>
  </template>
</div>

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./vue/dist/vue.js"></script>
<script src="//unpkg./[email protected]/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 mon one.

Following the stacktrace I saw in element-ui.mon.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

• javascript
• vue.js
• element-ui

Share Follow asked Dec 18, 2017 at 17:19 AlessandroAlessandro 4,47299 gold badges4141 silver badges7171 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./vue/dist/vue.js"></script>
<script src="//unpkg./[email protected]/lib/index.js"></script>
<div id="app">
  <template>
    <el-input @input.native="change" placeholder="Input something here"/>
  </template>
</div>

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.

本文标签： javascriptVuejsElement UI Get quoteventtargetquot at changeStack Overflow