Vue: Как насчет того, чтобы добавить несколько хуков в директиву v-on, например, «до» и «после».

Созданный на 16 мар. 2016 · 3Комментарии · Источник: vuejs/vue

Новый запрос функции:
Как насчет того, чтобы добавить несколько хуков в директиву v-on, например, «до» и «после».

Что я хочу сделать:
Я хочу добавить некоторую проверку перед запуском события щелчка, и множество кнопок не должны проверяться перед нажатием.

Как это работает:
Если у меня есть хук «до», мне нужно запустить «метод до», и только метод вернет true, я выполню реальную привязку события.

Источник

Jokcy

Самый полезный комментарий

Вы можете просто сделать это внутри обработчика. Если вам нужно повторно использовать ту же логику, вы можете либо сделать это фильтром, либо просто составить его внутри JS:

function guard (handler) {
  return function (e) {
    if (...) {
      e.preventDefault()
    }
    return handler.call(this, e)
  }
}

methods: {
  onClick: guard(function (e) {
    // ...
  })
}

yyx990803 16 мар. 2016

👍2 🎉1

Все 3 Комментарий

Как я справляюсь с этим на данный момент:

...
  methods: {
    someButtonClickHandler () {
      new Promise( (resolve, reject) => {
          // setup logic
      })
        .then( (result) => {
           // before logic,
        })
        .then( (result) => {
           // the handler
        })
        .catch( (err) => {
           // handle exceptions
        })
        .finally( () => {
          // cleanup ?
        })
    }  
  }
...

Возможно, это неправильный путь, но именно так я имею дело с вашим вариантом использования.

конкретно:

import store from 'application/store';
import {storeAnswer} from 'application/store/actions';
import validate from 'validate.js';

export default {

  vuex: {
    storeAnswer
  },

  computed: {

    firstName: {
      get () { return store.state.Thing.firstName; },
      set (value) {
        validate.async(data, constraints)
          .then( () => {
             this.storeAnswer(value);
          });
          .catch((err)=>{
            // handle validation errors ?
          });
      }
    }

  }
};

airtonix 16 мар. 2016

function guard (handler) {
  return function (e) {
    if (...) {
      e.preventDefault()
    }
    return handler.call(this, e)
  }
}

methods: {
  onClick: guard(function (e) {
    // ...
  })
}

yyx990803 16 мар. 2016

👍2 🎉1

@ yyx990803 Хорошо, я понял вашу точку зрения, большое спасибо

Jokcy 17 мар. 2016

Была ли эта страница полезной?

0 / 5 - 0 рейтинги