Subscribe on changes!

defineAsyncComponent

avatar
Oct 28th 2020

What problem does this feature solve?

setup() {
let component = shallowRef({});

const { visibly, component: componentName, hideModal } = useModal();

watch(
  () => componentName.value,
  componentName => {
    if (!componentName) return;

    component.value = defineAsyncComponent({
      loader: () => import(`@/components/modals/modal/${componentName}`),
      loadingComponent: LoadingModal,
      errorComponent: ErrorModal,
      delay: 50000000000
    });
  }
);

const escapeHandler = e => {
  if (e.key === `Escape` && visibly) {
    hideModal();
  }
};

onMounted(() => document.addEventListener("keydown", escapeHandler));
onUnmounted(() => document.removeEventListener("keydown", escapeHandler));

return { component, visibly, hideModal };
}

What does the proposed API look like?

delay not working

avatar
Oct 28th 2020

This still doesn't have a runnable reproduction, nor does it have a meaningful description. I have no idea what the problem is supposed to be. You don't show how you actually use that component.

Provide a runnable reproduction and I can re-open this.

avatar
Nov 26th 2020

Hello. I think you want to make shallowRef react. Wouldn't the trigger work with triggerRef(component);?