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

Question

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

<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

您可以使用计算方法。取一个临时变量，并将该变量作为v模型添加到您的输入中。每当值发生更改时，将该变量赋值给vuex存储变量(只需字符串连接)。您可以在计算中使用setter和getter。

下面的链接可能会有帮助。

assigning value to vuex store variable using computed setters and getters

Answer 2

让我们用Vuex做v模型，它非常简单：

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

然后v型过滤器将是神奇的。

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型输出

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如何获得主动的方式！

希望能帮上忙。