VueJs + Element-ui：如何从输入中获取本机事件

Question

我正在尝试从 el-input 标记的 @input.native 属性中获取 事件。 这里是模板代码：

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

以及脚本代码：

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

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

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

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

@Update：我使用的是 Vuex，所以 v-model 不是一个选项

Answer 1

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

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

然后 v-model 到过滤器上会很神奇。

Answer 2

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

以下链接可能会有所帮助。

assigning value to vuex store variable using computed setters and getters

Answer 3

我相信你做的一切都是正确的。但是，除非您绑定模型（使用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-model 输出

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 实现反应性的方式！

希望对您有所帮助。