Vue 2中使用Watcher实现搜索栏筛选功能时内容全部消失的问题求助

嘿，我一眼就揪出问题所在啦！你的watch监听函数里的filter回调没有返回判断结果，这就导致每次输入搜索内容时，filter都会认为所有国家都不匹配，最终filtered变成空数组，所以卡片全消失了。

问题根源 #

你用了带大括号的箭头函数，这种情况下必须显式使用return返回判断条件，否则函数默认返回undefined，而filter会把返回undefined的元素排除在外，自然就没有结果了。

修复方案 #

把watch里的代码改成下面这样（二选一即可）：

方案1：显式return结果

watch: {
  search() {
    this.filtered = this.countries.filter(country => {
      // 加上return，返回判断逻辑的结果
      return country.name.common.toLowerCase().includes(this.search.toLowerCase());
    })
  }
},

方案2：去掉大括号，使用箭头函数隐式返回

watch: {
  search() {
    this.filtered = this.countries.filter(country => 
      country.name.common.toLowerCase().includes(this.search.toLowerCase())
    )
  }
},

额外优化：用computed代替watch（更推荐） #

其实这种根据搜索词过滤列表的场景，用Vue的计算属性（computed）会更合适，它能自动依赖search和countries的变化更新结果，还会缓存计算值，性能更好。你可以把watch和data里的filtered替换成下面的代码：

// 删掉data中的filtered，新增computed属性
computed: {
  filtered() {
    // 先判断countries是否加载完成，避免报错
    if (!this.countries.length) return [];
    return this.countries.filter(country => 
      country.name.common.toLowerCase().includes(this.search.toLowerCase())
    )
  }
},

这样就不用手动维护filtered的更新逻辑了，Vue会帮你自动处理~

备注：内容来源于stack exchange，提问作者Pascal R.