Vue.js中过滤数据后赋值shifts对象无法重置初始状态的问题

问题描述 #

我从后端获取了如下格式的shifts对象数据，要在前端HTML的div中展示，同时实现基于input事件的搜索过滤功能。运行现有代码时，filteredData能返回正确的过滤结果，但执行this.shifts = this.filteredData赋值操作后，shifts仅保留搜索过滤后的内容，清空搜索框时无法恢复初始状态；不执行该赋值时，filteredData表现正常，清空输入可返回全部初始数据。我需要实现将过滤后的数据赋值给shifts对象且能正常重置的功能。

原代码示例 #

JavaScript代码 #

new Vue({
  el: "#app",
  data: {
      search_input: '',
      shifts: {"John":[{"user_id":193,"shift_hours":0}],"Rose":[{"user_id":194,"shift_hours":0}]},
      filteredData: {},
  },
  
  methods: {
    searchInput() {
      let data = this.shifts
      let filter = {};

      for (var key in data) {
        if (key.toLowerCase().includes(this.search_input.toLowerCase())) {
          filter[key] = data[key];
        }
      }
      
      this.filteredData = filter;

      if (Object.keys(this.filteredData).length) {
        console.log(this.filteredData);
        //this.shifts = this.filteredData;        
        //console.log(this.shifts)
      }
    }
  }
})

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="search_input" @input.prevent="searchInput" type="text"/>
</div>

解决思路与修改后的代码 #

核心问题是直接修改了shifts这个原始数据源，导致清空搜索时没有完整数据可恢复。解决办法是保存一份原始数据的副本，每次搜索都基于这份副本进行过滤，再将结果赋值给shifts。

修改后的JavaScript代码 #

new Vue({
  el: "#app",
  data: {
      search_input: '',
      // 保存原始数据副本
      originalShifts: {"John":[{"user_id":193,"shift_hours":0}],"Rose":[{"user_id":194,"shift_hours":0}]},
      shifts: {},
      filteredData: {},
  },
  // 初始化时把原始数据赋值给shifts
  created() {
    this.shifts = {...this.originalShifts};
  },
  methods: {
    searchInput() {
      // 基于原始数据进行过滤
      let data = this.originalShifts;
      let filter = {};

      for (var key in data) {
        if (key.toLowerCase().includes(this.search_input.toLowerCase())) {
          filter[key] = data[key];
        }
      }
      
      this.filteredData = filter;
      // 直接把过滤结果赋值给shifts
      this.shifts = filter;
      
      console.log(this.shifts);
    }
  }
})

说明 #

• originalShifts存储了从后端获取的完整原始数据，确保每次搜索都有可靠的数据源，不会因为shifts被修改而丢失信息。
• 初始化时通过created钩子将原始数据复制到shifts，保证初始展示的是完整数据。
• 每次搜索都基于originalShifts过滤，清空搜索框时，过滤条件会匹配所有键，自动将完整的原始数据重新赋值给shifts，实现重置效果。

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