Vue: Que diriez-vous d'ajouter quelques crochets à la directive 'v-on', tels que 'before' et 'after'

Créé le 16 mars 2016 · 3Commentaires · Source: vuejs/vue

Nouvelle demande de fonctionnalité :
Que diriez-vous d'ajouter quelques crochets à la directive 'v-on', tels que 'before' et 'after'.

Ce que je veux faire:
Je souhaite ajouter un événement de validation avant le déclenchement du clic, et de nombreux boutons à ne pas valider avant le clic.

Comment ça fonctionne:
Si j'ai le crochet avant, j'ai besoin d'exécuter la 'méthode avant' et seule la méthode renvoie vrai, je ferai la véritable liaison d'événement.

Source

Jokcy

Commentaire le plus utile

Vous pouvez simplement le faire à l'intérieur du gestionnaire. Si vous avez besoin de réutiliser la même logique, vous pouvez soit en faire un filtre, soit simplement le composer dans JS :

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

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

yyx990803 le 16 mars 2016

👍2 🎉1

Tous les 3 commentaires

Comment je gère ça en ce moment :

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

Ce n'est peut-être pas la bonne méthode, mais c'est ainsi que je traite votre cas d'utilisation.

Plus précisément:

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 le 16 mars 2016

Vous pouvez simplement le faire à l'intérieur du gestionnaire. Si vous avez besoin de réutiliser la même logique, vous pouvez soit en faire un filtre, soit simplement le composer dans JS :

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

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

yyx990803 le 16 mars 2016

👍2 🎉1

@ yyx990803 D'accord, je suppose que je comprends votre point de vue, merci beaucoup

Jokcy le 17 mars 2016

Cette page vous a été utile?

0 / 5 - 0 notes