Problema: los documentos de Visjs muestran ejemplos de cómo usar plantillas de reacción en visjs para artículos personalizados pero no para vue.
Solución: necesitamos usar las funciones de renderizado de vue para renderizar la plantilla mientras le pasamos accesorios al elemento secundario y emitimos eventos al elemento principal.
Resolví el problema donde groupTemplate no quería cargar. (respuesta actualizada)
Entonces, hacer que la función de procesamiento sea asíncrona parece resolverlo: D Dejaré esto aquí para futuras personas. Luchó todo el día tratando de hacer que la plantilla de grupo funcionara. Hubiera pensado que defineAsyncComponent lo resolvería, pero no se movió del todo, parece que la carga asincrónica de la función de procesamiento funciona.
import { render, h } from 'vue'; const itemTemplate = async (item, element) => render(h(bar, { onDelete: (ev) => { items.remove(item.id) }, item, }), element ) const groupTemplate = async (group, element) => render(h(groupbar, { onHide: () => { groups.update(group.id, { hidden: true }) }, group, }), element ) const options = ref({ template: (item, element) => { if (!item) return; return itemTemplate(item, element); }, groupTemplate: (group, element) => { if (!group) return; return groupTemplate(group, element); } })modelo
<template> <div class="group-container"> <button @click="emits('hide', group.id)">hide</button> {{ group.content }} </div> </template> <script setup> import { watch } from 'vue'; const emits = defineEmits(['hide']); const props = defineProps({ group: { type: Object } }) </script> <style> .group-container { background: red; } </style>