Vue.js + Tippy.js（vue-tippy）：筛选列表后提示框未正确更新

这个问题的核心原因是Vue的DOM复用机制加上VueTippy实例没有正确跟随列表更新导致的。当你使用v-for渲染列表但没有指定唯一的key时，Vue会复用已有的DOM元素来提升性能，但这就会让原本绑定在旧列表项上的Tippy实例被保留下来，筛选后的新列表项复用了旧DOM，自然就显示错误的提示内容了。

解决方案步骤： #

1. 给v-for添加唯一key
   在列表的<li>标签上加上:key="job.id"，让Vue能够准确识别每个列表项，避免DOM复用：

   <li v-for="job in filterJobs(jobs, filterJobName)" :key="job.id">
     <!-- 原有内容不变 -->
   </li>
   

2. 监听筛选条件变化，重新初始化Tippy
   虽然加了key已经能解决大部分问题，但为了确保筛选后Tippy实例完全正确绑定，我们可以在筛选条件变化时，手动触发Tippy的重新初始化。修改你的JS代码，添加一个watch监听filterJobName：

   const app = new Vue({
     el: "#app",
     data: {
       filterJobName: "",
       jobs: [/* 原有数据不变 */]
     },
     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;
             if (found) return job;
           });
         }
       },
       initTippy() {
         // 手动初始化所有Tippy实例
         this.$nextTick(() => {
           tippy('[v-tippy]', {
             html: (ref) => ref.getAttribute('data-tippy-html'),
             trigger: 'click',
             placement: 'right',
             arrow: true
           });
         });
       }
     },
     mounted() {
       this.initTippy();
     },
     watch: {
       filterJobName() {
         // 先销毁旧的Tippy实例，再重新初始化
         tippy.destroyAll();
         this.initTippy();
       }
     }
   });
   

3. 调整v-tippy的写法（可选优化）
   把v-tippy的配置改成通过data-*属性传递，这样手动初始化时更清晰：

   <span class="files-number" 
         v-html="job.files.length + ' files'" 
         data-tippy-html="#job-files-{{ job.id }}">
   </span>
   

为什么这样有效？ #

• 唯一key让Vue为每个列表项创建独立的DOM节点，不会复用旧节点，Tippy实例就能绑定到正确的元素上。
• 监听筛选条件变化后重新初始化Tippy，确保每次筛选后所有可见的列表项都有正确的提示框绑定。

你可以把这些修改应用到你的代码中，就能解决筛选后提示框内容错误的问题了。

内容的提问来源于stack exchange，提问作者Giewont