VueJs + Element-ui: 如何从输入获取本地事件

Question

我正在尝试从 el-input 标签的 @input.native 属性获取 event。这里的模板代码：

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

以及脚本代码：

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

我的 filter.name 已用值 "aaa" 初始化，然后我在字段中键入 "b"。出于某种原因，日志上的输出是 "aaa" 但我需要 "aaab" 值。

我也不能使用 @input 因为它 return 只有值，我还需要其他属性。

有没有办法获取有效的原生输入事件？

@更新：我正在使用 Vuex，所以 v-model 不是一个选项

Answer 1

我相信你做的一切都是对的。但是，除非您绑定模型（使用 v-model="filter.name"）而不是 :value，否则无法更新该值。

这是我所做的：

HTML

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

脚本

<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>

输出

这是我在控制台上输入时得到的输出

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

所以你的代码一定能正常工作。

那怎么了？

错误的是您绑定的是 value，而不是 model。

当我将 :value="someValue" 更改为 v-model="someValue" 时，输出如下：

v-模型输出

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

总结

始终使用 v-model 绑定值（不使用 :value）。这就是 Vue 实现反应性的方式！

希望对您有所帮助。

Answer 2

您可以使用计算方法。获取一个临时变量并将该变量作为 v-model 添加到您的输入中。每当值发生变化时，将该变量分配给 vuex 存储变量（除了字符串连接外什么都没有）。您可以在计算中使用 setter 和 getter。

关注 link 可能会有帮助。

Answer 3

让我们用 Vuex 做一个 v-model，非常简单：

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

然后 v-model 到过滤器上将是神奇的。

VueJs + Element-ui: 如何从输入获取本地事件

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

vue.js

user-input

element-ui

HTML

脚本

输出

v-模型输出

总结