Vue: Que tal adicionar alguns ganchos à diretiva 'v-on', como 'antes' e 'depois'

Criado em 16 mar. 2016  ·  3Comentários  ·  Fonte: vuejs/vue

Solicitação de novo recurso:
Que tal adicionar alguns ganchos à diretiva 'v-on', como 'antes' e 'depois'.

O que eu quero fazer:
Eu quero adicionar um evento de validação antes do clique ser acionado e muitos botões para não serem validados antes do clique.

Como funciona:
Se eu tiver o gancho antes, preciso executar o 'método antes' e somente o método retornar true farei a vinculação do evento real.

Comentários muito úteis

Você pode simplesmente fazê-lo dentro do manipulador. Se você precisar reutilizar a mesma lógica, você pode fazer disso um filtro ou apenas compô-lo dentro do JS:

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

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

Todos 3 comentários

Como eu lido com isso no momento:

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

Pode não ser o caminho certo, mas é assim que estou lidando com seu caso de uso.

especificamente:

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

  }
};


Você pode simplesmente fazê-lo dentro do manipulador. Se você precisar reutilizar a mesma lógica, você pode fazer disso um filtro ou apenas compô-lo dentro do JS:

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

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

@yyx990803 Tudo bem, acho que entendi seu ponto, THX muito

Esta página foi útil?
0 / 5 - 0 avaliações