我正在尝试使用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
有什么建议吗?