[Vuejs]-Accept hex only input

by

0👍

Vue.directive('hexonly', {
    bind(el, binding, vnode) {
        const vm = vnode.componentInstance;
        el.__unbindHexonly = vm.$watch('value', value => {
            vm.__emitValue(value.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase());
        }, { immediate: true });
    },
    unbind(el) {
        el.__unbindHexonly && el.__unbindHexonly();
    }
});

https://jsfiddle.net/6bw0zvdm/

Quasar uses some deferred model update magic, thus using specific private method __emitValue (source)

By the way, you don’t need to specify directive expression ("txt"), v-hexonly will work.

Leave a comment