搜索分类列表时复选框状态显示异常问题求助

核心问题 #

1. v-for的key使用错误：用数组索引idx作为key，当列表过滤/恢复时，Vue的虚拟DOM会复用元素，导致复选框的显示状态与实际checked属性错位。
2. 复选框实现方式不当：通过v-if切换两个独立的<input>元素，破坏了组件状态的连续性，且未正确用v-model绑定checked状态，仅用:value无法同步显示与数据。
3. 搜索函数存在冗余代码：search_category_func中多余的箭头函数导致逻辑无效。

具体修复步骤 #

1. 修正HTML模板

将两个切换的复选框合并为一个，用动态class控制样式，同时通过v-model绑定category.checked，并将v-for的key改为唯一标识category.id：

<input type="text" class="search_ruta_input" v-model="search_category" placeholder="Search Category" v-on:keyup="search_category_func(search_category)">

<div v-for="(category, idx) in filtered_category_list" :key="category.id">
  <input 
    type="checkbox" 
    :class="category.checked ? 'checkbox_filled' : 'checkbox_new'"
    v-model="category.checked"
    @click="choose_category(category)"
  >
  {{category.category}} {{category.checked}} 
</div>

2. 修复搜索函数逻辑

删除search_category_func中的冗余代码，确保过滤逻辑正确：

search_category_func(search_category) {
  this.filtered_category_list = this.category_list.filter(
    category_object => category_object.category.toLowerCase().includes(search_category.toLowerCase())
  )
},

3. 优化初始化逻辑

去掉mounted中的setTimeout，直接在load_category的回调中调用搜索函数，避免不必要的延迟：

mounted(){
  this.load_category("")
},

// 同时修改load_category方法
load_category(search_category){
  var self = this
  axios({
    method:'get',
    url: API_URL+ '/get_categories'+'?search_item='+search_category,
  })
  .then(function(response){
    self.category_list = response.data
    self.search_category_func("") // 加载完成后直接初始化过滤列表
  })
},

4. 可选：简化choose_category方法

因为已经用v-model绑定了category.checked，如果不需要额外逻辑，choose_category可以直接简化（或移除），让v-model自动处理状态切换：

choose_category(category_object){
  // 若需要额外逻辑（比如同步到其他数据），保留此方法；否则可移除
  category_object.checked = !category_object.checked
},

修复原理 #

• 唯一key：使用category.id作为v-for的key，Vue能准确跟踪每个列表项的状态，避免过滤/恢复时DOM复用导致的显示错误。
• v-model绑定：直接将复选框的checked状态与数据模型绑定，确保显示与category.checked属性完全同步。
• 动态class：通过条件判断切换样式，避免创建/销毁不同的<input>元素，保持组件状态的连续性。

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