Vue.js - динамически применяемый метод к обработчикам полей ввода - PullRequest
Новая
       10

Vue.js - динамически применяемый метод к обработчикам полей ввода

1 голос
/ 16 октября 2019

Я использую Vue.js , и я новичок в этом. Я использую v-for для динамического создания тегов <input>. Также я использую v-модель и 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" },
]

Ответы [ 3 ]

1 голос
/ 16 октября 2019

Попробуйте передать имя метода в метод с именем call: 

@input="call(event.methodToApply)"

внутри ваших методов: 

methods:{
  call(methodName){
    this[methodNam]();
   },
 formatEventOne(){
...
},
formatEventTwo(){
...
}
formatEventThree(){
...
}
...
}
0 голосов
/ 16 октября 2019

Вот несколько способов достичь этого:

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

Теперь вы можете применить его так:

{ ..., methodToApply: myFuncLocal }

Вы также можете определить функцию в своих methods свойствах, тогда вы будете ссылаться на нее через this., как обычно

{ ..., methodToApply: this.myFuncMethod }

Если вы хотите вызвать ее с помощьюконкретный параметр, который вы можете заключить в функцию

0 голосов
/ 16 октября 2019

В vue вы можете получить доступ к значению event с помощью $event, кроме того, вы можете использовать индекс в v-for="(item, index) in items", тогда вы можете просто ссылаться на свой метод из массива методов вместо того, чтобы хранить все в одном объектеЕсли, конечно, вы не хотите ...

...