Vue: ماذا عن إضافة بعض الخطافات إلى التوجيه "v-on" ، مثل "قبل" و "بعد"

تم إنشاؤها على ١٦ مارس ٢٠١٦  ·  3تعليقات  ·  مصدر: vuejs/vue

طلب ميزة جديدة:
ماذا عن إضافة بعض الخطافات إلى التوجيه "v-on" ، مثل "قبل" و "بعد".

ماذا اريد ان افعل:
أرغب في إضافة بعض التحقق من الصحة قبل تشغيل حدث النقر ، والكثير من الأزرار لا يتم التحقق من صحتها قبل النقر.

كيف تعمل:
إذا كان لديّ الخطاف السابق ، فأنا بحاجة إلى تشغيل "الطريقة السابقة" وستكون الطريقة الوحيدة التي ترجع صوابًا هي التي سأقوم بربط الحدث الحقيقي.

التعليق الأكثر فائدة

يمكنك ببساطة القيام بذلك داخل المعالج. إذا كنت بحاجة إلى إعادة استخدام نفس المنطق ، فيمكنك إما إنشاء عامل تصفية أو تكوينه داخل 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 التقييمات