Vue: Wie wäre es, wenn Sie einige Hooks zur 'v-on'-Direktive hinzufügen, wie z. B. 'before' und 'after'?

Erstellt am 16. März 2016  ·  3Kommentare  ·  Quelle: vuejs/vue

Neue Funktionsanfrage:
Wie wäre es, wenn Sie einige Hooks zur 'v-on'-Direktive hinzufügen, wie z. B. 'before' und 'after'.

Was ich machen will; was ich vorhabe zu tun:
Ich möchte einige Validierungen hinzufügen, bevor das Klickereignis ausgelöst wird, und viele Schaltflächen, die vor dem Klicken nicht validiert werden sollen.

Wie es funktioniert:
Wenn ich den Before-Hook habe, muss ich die 'Before-Methode' ausführen und nur die Methode gibt true zurück. Ich mache die eigentliche Ereignisbindung.

Hilfreichster Kommentar

Sie können dies einfach im Handler tun. Wenn Sie dieselbe Logik wiederverwenden müssen, können Sie daraus entweder einen Filter machen oder ihn einfach in JS verfassen:

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

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

Alle 3 Kommentare

Wie ich das im Moment handhabe:

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

Vielleicht nicht der richtige Weg, aber so gehe ich mit Ihrem Anwendungsfall um.

speziell:

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 ?
          });
      }
    }

  }
};


Sie können dies einfach im Handler tun. Wenn Sie dieselbe Logik wiederverwenden müssen, können Sie daraus entweder einen Filter machen oder ihn einfach in JS verfassen:

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

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

@yyx990803 In Ordnung, ich glaube, ich verstehe, was du meinst, vielen Dank

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

seemsindie picture seemsindie  ·  3Kommentare

robertleeplummerjr picture robertleeplummerjr  ·  3Kommentare

WolfgangFellger picture WolfgangFellger  ·  3Kommentare

fergaldoyle picture fergaldoyle  ·  3Kommentare

loki0609 picture loki0609  ·  3Kommentare