javascript - Vue.js - 在输入字段处理程序上动态应用方法

Question

我正在使用 Vue.js 并且我是新手。我正在使用 v-for 动态创建 <input>标签。我还使用了 v-model 和 v-bind ，它们可以按我的意愿工作。

但我也在尝试对每个单独的输入字段应用不同的方法。我正在尝试类似 @input="event.methodToApply" 的东西这些方法将正则表达式应用于输入字段值。对于我认为的问题并不重要。但是我不知道如何在每个领域应用不同的方法？

或者是否可以为方法提供一个参数，以便我可以在方法内部解决问题？

<div class="case" v-for="event in this.myEvents">
    <input
        v-model="event.value"
        @input="event.methodToApply"  <-- this is how I would approach it but it obviously does not work
        type="text"
        v-bind:title="event.name"
        name="performance"
        class="form-row-right-part-first-element"
    />
</div>

还有我的数据

myEvents: [
    { id: "event-1", name: "event one", value: "20", methodToApply: "formatEventOne" },
    { id: "event-2", name: "event two", value: "20", methodToApply: "formatEventTwo" },
    { id: "event-3", name: "event two", value: "20", methodToApply: "formatEventThree" },
]

Answer 1

尝试将方法名称传递给名为call 的方法:

@input="call(event.methodToApply)" 

在你的方法中:

methods:{
  call(methodName){
    this[methodNam]();
   },
 formatEventOne(){
...
},
formatEventTwo(){
...
}
formatEventThree(){
...
}
...
}