Vue.js + Element UI：在更改时获取“event.target”

Posted 2023-02-22

【中文标题】Vue.js + Element UI：在更改时获取“event.target”

【英文标题】：Vue.js + Element UI: Get "event.target" at change

【发布时间】：2018-06-01 02:04:36

【问题描述】：

我无法在其事件处理程序中获取触发事件的 html 字段（在 javascript 中是 event.target）。

我有一个表格：

在更改事件时附加到函数的输入元素 管理更改事件的函数

我的代码如下：

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>

我知道我可以调用不同的函数，并且在每个函数中我都知道谁是相对输入，但我想使用一个通用的。

按照我在element-ui.common.js 中看到的堆栈跟踪，事件触发的代码：

handleChange: function handleChange(event) 
  this.$emit('change', event.target.value);
,

element 只将值传递给事件处理程序。 无论如何，有什么想法可以得到event.target，好吗？

谢谢

【参考方案1】：

你可以使用@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>

【讨论】：

如果字段中有:value 属性，这不起作用。我的el-input 有一个:value 属性，无论我输入什么，返回的事件总是显示原始值，而不是新值（例如：当前值是“grea”，然后我输入“t”，然后@ 987654326@ 是“grea”，而不是“great”）

【参考方案2】：

看起来 Element UI 只是吃掉了事件并且只返回了值。你可以做的不是@change(change) 是@keyup.native(change) 然后你的par 参数将是事件而不仅仅是值。