Vue数组数字搜索问题：删除搜索内容后原数据无法恢复

你的问题核心是直接修改了存储原始数据的list变量——每次搜索时用filter过滤后直接覆盖list，导致原始数据丢失，清空搜索框时没有完整的数据源可以恢复。

正确解决思路 #

把原始数据和用于展示的过滤后数据分离，始终保留原始数据的副本，过滤操作基于原始数据进行，而不是修改原始数据本身。推荐用Vue的计算属性来实现，因为它能自动响应搜索关键词的变化，无需手动调用方法。

修改后的代码示例 #

JavaScript部分

new Vue({
  el: '#app',
  data() {
    return {
      originalList: [], // 专门存储原始数据，永远不修改
      search: '',
    }
  },
  mounted() {
    // 初始化原始数据
    for(let i = 1300; i <= 1400; i++) {
      const _n = i.toString()
      this.originalList.push(_n)
    }
  },
  computed: {
    // 计算属性自动根据search返回过滤后的列表
    filteredList() {
      // 搜索框为空时直接返回原始列表
      if (!this.search.trim()) {
        return this.originalList
      }
      // 基于原始数据进行过滤
      return this.originalList.filter(item => item.includes(this.search.trim()))
    }
  }
})

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="search" placeholder="search number" />
  <!-- 直接遍历计算属性返回的过滤列表 -->
  <ul>
    <li v-for="(item, index) in filteredList" :key="index">{{item}}</li>
  </ul>
</div>

为什么这样有效？ #

1. originalList始终保存完整的原始数据，不会被任何操作修改；
2. filteredList是计算属性，会随着search的变化自动重新计算，无需手动调用搜索方法；
3. 清空搜索框时，filteredList自动返回originalList，实现原始列表的恢复。

备选方案（使用方法实现） #

如果你更习惯用方法触发搜索，同样需要保留原始数据副本：

new Vue({
  el: '#app',
  data() {
    return {
      list: [], // 用于展示的列表
      originalList: [], // 原始数据副本
      search: '',
    }
  },
  mounted() {
    for(let i = 1300; i <= 1400; i++) {
      const _n = i.toString()
      this.originalList.push(_n)
    }
    this.list = [...this.originalList] // 初始化展示列表
  },
  methods: {
    handleSearch() {
      if (!this.search.trim()) {
        // 清空搜索框时恢复原始列表
        this.list = [...this.originalList]
        return
      }
      // 基于原始数据过滤，而不是当前的list
      this.list = this.originalList.filter(item => item.includes(this.search.trim()))
    }
  }
})

模板无需修改，但这种方式需要手动绑定@input事件，不如计算属性的响应式体验流畅。

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