Блог

Проблема: В документах Visjs показаны примеры использования шаблонов реагирования в visjs для таможенных товаров, но не для vue.

Решение: нам нужно использовать функции визуализации vue для визуализации шаблона при передаче реквизитов дочернему элементу и передаче событий обратно родительскому.

Я решил проблему, когда groupTemplate не хочу загружаться. (ответ обновлен)

Таким образом, асинхронность функции рендеринга, похоже, решает эту проблему Я просто оставлю это здесь для будущих людей. Весь день боролся, пытаясь заставить шаблон группы работать. Я бы подумал defineAsyncComponent , что это решит проблему, но она не совсем сдвинулась с места, похоже, просто асинхронная загрузка функции рендеринга делает свое дело.

  import { render, h } from 'vue';  const itemTemplate = async (item, element) =gt; render(h(bar, {  onDelete: (ev) =gt; {  items.remove(item.id)  },  item, }), element )   const groupTemplate = async (group, element) =gt; render(h(groupbar, {  onHide: () =gt; {  groups.update(group.id, { hidden: true })  },  group,  }), element )  const options = ref({  template: (item, element) =gt; {  if (!item) return;  return itemTemplate(item, element);  },  groupTemplate: (group, element) =gt; {  if (!group) return;  return groupTemplate(group, element);  }  })   

шаблон

  lt;templategt;  lt;div class="group-container"gt;  lt;button @click="emits('hide', group.id)"gt;hidelt;/buttongt;  {{ group.content }}  lt;/divgt; lt;/templategt;  lt;script setupgt; import { watch } from 'vue';   const emits = defineEmits(['hide']);  const props = defineProps({  group: {  type: Object  } })  lt;/scriptgt;   lt;stylegt; .group-container {  background: red; } lt;/stylegt;