Inject vue component to task text


#1

Hi, I’m trying your gantt library written in pure JS. Is there possibility to inject vue component inside columns?
I check documentation, samples, your community forum and I’m run out from ideas how to solve this.
Here is my code

  async mounted() {
    await this.fetchData()
    console.log('AFTER FETCH')
    const gantt = await this.initGantt()
    const SearchInput = Vue.extend({
      components: {
        AntInput,
        MyIcon,
      },
      data: () => {
        return {
          placeholder: this.$t('projects.searchBarPlaceholder'),
        }
      },
      methods: {
        searchProjectsQuery: () => {
          console.log('DHSIHDISH')
        },
      },
      template:
        '        <a-input\n' +
        '          size="large"\n' +
        '          type="text"\n' +
        '          allow-clear\n' +
        '          v-bind:placeholder="placeholder"\n' +
        '          @change="searchProjectsQuery"\n' +
        '        >\n' +
        '          <template slot="prefix">\n' +
        '            <MyIcon type="search" />\n' +
        '          </template>\n' +
        '        </a-input>',
    })
    const searchInputInstatnce = new SearchInput({})
    searchInputInstatnce.$mount('#search-input')

    const tasks = gantt.getTaskByTime()
    const Avatar = Vue.extend({
      components: {
        AvatarHero,
      },
      props: {
        record: {
          type: Object,
          default: () => {
            return {}
          },
        },
      },
      template:
        '        <avatar-hero\n' +
        '          slot="icon"\n' +
        '          :img-url="record.avatarUrl"\n' +
        '          :avatar-name="record.fullName"\n' +
        '        ></avatar-hero>',
    })
    tasks.forEach((task: any) => {
      if (task.type === 'person') {
        try {
          new Avatar({ propsData: { record: task } }).$mount(
            document.getElementById(task.id)
          )
        } catch (error: any) {
          console.log('ERROR', error)
        }
      }
    })

    // setTimeout(() => {
    //   console.log('REFRESHHH')
    //   gantt.refreshData()
    // }, 2500)
  }

Here is my video. These grey circles are avatar which I want to inject. They are dissapear after gantt’s rerender