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

Question

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

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

或者如果可能的话，给该方法提供一个参数，以便我可以解决方法内部的问题？

<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(){
...
}
...
}

Answer 2

实际上，您可以使用event访问$event值，此外，您可以在v-for="(item, index) in items"中使用索引，然后您可以简单地从方法数组中引用您的方法，而不必将所有内容都保留在同一对象上，除非您当然想要...

Answer 3

这里有一些方法可以实现它：

const myFuncLocal = () => { ... } // (or = function() {...})

现在您可以像这样应用它：

{ ..., methodToApply: myFuncLocal }

您还可以在methods属性中定义一个函子，然后像往常一样通过this.引用它

{ ..., methodToApply: this.myFuncMethod }

如果要使用特定参数调用它，则可以包装该函数

{ ..., methodToApply: () => myFuncLocal(param) }

如果您分配的函数接受参数，则以这种方式调用它会自动将其传递给它，例如@click="event.methodToApply(event.value)"