Vue: ¿Qué tal agregar algunos ganchos a la directiva 'v-on', como 'antes' y 'después'?

Creado en 16 mar. 2016 · 3Comentarios · Fuente: vuejs/vue

Nueva solicitud de función:
¿Qué tal agregar algunos ganchos a la directiva 'v-on', como 'antes' y 'después'?

Lo que quiero hacer:
Quiero agregar un evento de validación antes de hacer clic que se active, y muchos botones que no se validarán antes de hacer clic.

Cómo funciona:
Si tengo el enlace anterior, necesito ejecutar el 'método anterior' y solo el método devuelve verdadero, haré el enlace del evento real.

Fuente

Jokcy

Comentario más útil

Simplemente puede hacerlo dentro del controlador. Si necesita reutilizar la misma lógica, puede convertirlo en un filtro o simplemente componerlo dentro de JS:

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

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

yyx990803 en 16 mar. 2016

👍2 🎉1

Todos 3 comentarios

Cómo manejo esto en este momento:

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

Puede que no sea la forma correcta, pero así es como estoy lidiando con su caso de uso.

específicamente:

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 en 16 mar. 2016

Simplemente puede hacerlo dentro del controlador. Si necesita reutilizar la misma lógica, puede convertirlo en un filtro o simplemente componerlo dentro de JS:

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

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

yyx990803 en 16 mar. 2016

👍2 🎉1

@yyx990803 Muy bien, supongo que entiendo tu punto, THX mucho

Jokcy en 17 mar. 2016

¿Fue útil esta página

0 / 5 - 0 calificaciones