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

Question

我正在使用Vue.js，而且我对它还很陌生。我使用v动态创建<input>标记。另外，我使用v-模型和v-绑定，这是我想要的。

但我也在尝试将不同的方法应用于每个单独的输入字段。我正在尝试类似于@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

在vue中，您可以使用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)"