directive.ts

import { boot } from 'quasar/wrappers';

// NOTE: maunya biar directive ini seperti gabungan dari v-bind dan v-on tapi enggak mau dia
export default boot(({ Vue }) => {
  Vue.directive('cform', {
    // When the bound element is inserted into the DOM...
    bind(el, binding, vNode) {
      if (!binding.arg) {
        console.warn(`v-cform without argument does not support.`);
      }
      const key = binding.arg;
      const setField = binding.value;
      const field = setField(key);
      vNode.componentOptions.Ctor.mixin({
        mounted() {
          Object.entries(field.attrs).map(([key, value]) => {
            this.$set(this.$props, key, value);
          });
          Object.entries(field.listeners).map(([key, val]) => {
            if (val instanceof Function) {
              console.log(this);
              this.$on(key, (...args) => {
                val(...args);
                Object.entries(field.attrs).map(([key, value]) => {
                  this.$set(this.$props, key, value);
                });
              });
            }
          });
        },
      });
    },
  });
});