Vue.js + Tippy.js (vue-tippy): tooltips not updated on filtered/changed list

Question

I'm trying to use VueTippy to display details of items in the filtered list. Everything works properly when the full list is displayed. For the filtered list, incorrect tooltips are displayed (list of files from the wrong list item).

HTML:

<main id="app">

  <form @submit.prevent>
    <input v-model="filterJobName" placeholder="Search">
  </form>

  <ul>
    <li v-for="job in filterJobs(jobs, filterJobName)">
      <span class="job-name" :class="{ 'more-files' : (job.files.length > 1) }">{{ job.jobName }}</span><span class="files-number" v-html="job.files.length + ' files'" v-tippy="{html: '#job-files-' + job.id, trigger: 'click', placement: 'right', arrow: true}"></span>
      <aside :id="'job-files-' + job.id">
        <ul class="file-list">
          <li v-for="file in job.files">
            {{ job.jobName + ': ' + file.fileName }}
          </li>
        </ul>
      </aside>
    </li>
  </ul>

</main>

JS:

const app = new Vue({
  el: "#app",
  data: {
    filterJobName: "",
    jobs: [
      {
        id: 1,
        jobName: "Ostrich",
        files: [
          { fileName: "ultrices.jpeg" },
          { fileName: "pede_morbi_porttitor.png" },
          { fileName: "maecenas_rhoncus_aliquam.png" },
          { fileName: "orci_eget_orci.jpeg" }
        ]
      },
      {
        id: 2,
        jobName: "Galapagos dove",
        files: [
          { fileName: "mattis_nibh_ligula.tiff" },
          { fileName: "mus_etiam.png" },
        ]
      },
      {
        id: 3,
        jobName: "African fish eagle",
        files: [
          { fileName: "at_dolor_quis.tiff" },
          { fileName: "maecenas_rhoncus_aliquam.png" },
          { fileName: "tempor_convallis.jpeg" }
        ]
      },
      {
        id: 4,
        jobName: "Kori bustard",
        files: [
          { fileName: "a_ipsum_integer.jpeg" }
        ]
      },
      {
        id: 5,
        jobName: "Sally lightfoot crab",
        files: [
          { fileName: "mattis_nibh_ligula.tiff" },
          { fileName: "maecenas_rhoncus_aliquam.png" },
          { fileName: "orci_eget_orci.jpeg" },
          { fileName: "ultrices.jpeg" },
          { fileName: "tempor_convallis.jpeg" }
        ]
      }
    ]
  },
  methods: {
    filterJobs: function(jobs, filterString) {
      if (filterString === "") {
        return jobs;
      } else {
        return jobs.filter(function(job) {
          let found = false;

          if (job.jobName.indexOf(filterString) !== -1) found = true;

          // job.files.forEach(function(file) {
          // if (file.fileName.indexOf(filterString) !== -1) found = true;
          // });

          if (found) return job;
        });
      }
    }
  }
});

CSS:

ul {
  list-style: none;
  padding: 0;
}

.job-name {
  display: inline-block;
  width: 300px;
}

.files-number {
  cursor: pointer;
}

aside {
  display: none;
}

.file-list {
  text-align: left;
}

A working example can be seen here: https://codepen.io/anon/pen/Lervxw

Any suggestions?

Answer 1

This seems like an unresolved bug in Vue Tippy when using v-tippy directive. I could get rid of this issue by using VueTippy component tag directly.