Vue.js + Tippy.js(vue-tippy):未在过滤/更改列表上更新工具提示

时间:2018-01-13 22:53:08

标签: javascript vuejs2

我正在尝试使用VueTippy来显示已过滤列表中项目的详细信息。显示完整列表时,一切正常。对于筛选列表,将显示不正确的工具提示(错误列表项中的文件列表)。

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;
}

这里可以看到一个工作示例: https://codepen.io/anon/pen/Lervxw

有什么建议吗?

0 个答案:

没有答案