Помесить несколько методов на одно событие Vue js

Question

В форме есть поле:

<input type="text" class="form-control" :class="{ 'is-invalid': $v.firstName.$error }" id="firstName" v-model="firstName" @blur="$v.firstName.$touch">

при изменении этого поля кроме $v.firstName.$touch также должен вызываться еще метод changeFirstName так же @blur="changeFirstName"

При этом changeFirstName - кастомный метод, а $v.firstName.$touch нет

Как вызвать несколько событий?

Answer 1

Привяжитесь к @change или @input и вызывайте любой метод, либо навешивайте watch на firstName

Answer 2

Создать метод обработчик события, который будет вызывать остальные обработчики

<input type="text" v-model="firstName" @blur="onFirstNameInputBlur($event)">

...

methods: {

    onFirstNameInputBlur(event) {
        this.handle1(event);
        this.handle2(event);
        ...
    }

}

Или создать пользовательское событие и обработчики для него программно

<input type="text" v-model="firstName" @blur="$emit('firstname-input-blur', $event)">

...

mounted: function() {
    this.$on('firstname-input-blur', function(event) {
        ...
    });
    this.$on('firstname-input-blur', function(event) {
        ...
    });
    ...
}

БЛОГ НА HUSL

Помесить несколько методов на одно событие Vue js

Ответы (2 шт):