Vue: 'before'や'after'などの'v-on'ディレクティブにいくつかのフックを追加するのはどうですか?

作成日 2016年03月16日  ·  3コメント  ·  ソース: vuejs/vue

新機能のリクエスト:
'before'や'after'などの'v-on'ディレクティブにいくつかのフックを追加するのはどうですか。

私がやりたいこと:
クリックイベントがトリガーされる前にいくつかの検証を追加し、クリックする前に検証されないボタンをたくさん追加したいと思います。

使い方:
beforeフックがある場合は、「beforeメソッド」を実行する必要があり、メソッドのみがtrueを返し、実際のイベントバインディングを実行します。

最も参考になるコメント

ハンドラー内で簡単に実行できます。 同じロジックを再利用する必要がある場合は、それをフィルターにするか、JS内で構成することができます。

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

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

全てのコメント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 ?
          });
      }
    }

  }
};


ハンドラー内で簡単に実行できます。 同じロジックを再利用する必要がある場合は、それをフィルターにするか、JS内で構成することができます。

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

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

@ yyx990803わかりました、私はあなたのポイントを得ると思います、THXはたくさんあります

このページは役に立ちましたか?
0 / 5 - 0 評価