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模型，这很简单：

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

然后将v模型放到过滤器上将是神奇的。

Answer 2

我相信您做对了所有事情。但是，除非您绑定模型（使用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 3

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

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

assigning value to vuex store variable using computed setters and getters

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

3 个答案:

HTML

脚本

输出

v模型输出

摘要