Vue.js v-for循环中v-model绑定未知动态key的实现方案

你模板里写的v-model="filters[facetKey]"动态键语法本身没有任何问题，绑定失效根本不是写法的锅，是Vue响应式机制的限制：你初始定义的filters是空对象，type、color这类分面对应的属性一开始根本不存在，后续通过动态键给对象新增属性时，Vue2默认无法捕获到这个新增操作，新属性不会被加入响应式系统，双向绑定自然就失效了——这也是为什么你硬编码filters.type能正常跑：硬编码相当于你提前告诉Vue要监听这个属性，动态加的属性Vue一开始感知不到。

方案1：提前初始化filters属性（推荐，代码改动最小） #

你原来的模板一行都不用改，只要在组件初始化阶段，遍历facets的所有键，给filters提前注册好每个分面对应的空数组（复选框组必须绑定数组才能存多选项），把所有属性提前纳入响应式监听即可。

选项式API（兼容Vue2/Vue3）的初始化代码写在created钩子里就行：

created() {
  Object.keys(this.facets).forEach(facetKey => {
    // Vue2 必须用$set注册新属性才能保证响应式
    this.$set(this.filters, facetKey, [])
    // 如果你用Vue3，直接写 this.filters[facetKey] = [] 就可以，不需要$set
  })
}

如果你用Vue3组合式API，初始化逻辑写在setup里：

import { reactive } from 'vue'
const facets = {
  type: ['type1', 'type2', 'type3'],
  color: ['color1', 'color2']
}
const filters = reactive({})
// 提前注册所有分面对应的属性
Object.keys(facets).forEach(key => {
  filters[key] = []
})

加完这段初始化，你原来的动态v-model绑定就和硬编码的效果完全一致，勾选、取值都不会有问题。

方案2：运行时动态注册响应式属性（适合无法提前拿到facets键的场景） #

如果你的facets是接口异步返回的，没法在初始化阶段拿到所有键，就不要直接用v-model，手动实现双向绑定逻辑，每次勾选前先检查对应属性是否存在，不存在就用$set注册成响应式的：

<input 
  type="checkbox" 
  :checked="filters[facetKey]?.includes(value)"
  @change="handleCheckChange($event, facetKey, value)"
  :id="value.toLowerCase().trim()" 
  :value="value"
>

对应的方法逻辑：

methods: {
  handleCheckChange(e, facetKey, val) {
    // 对应属性不存在就先注册
    if (!this.filters.hasOwnProperty(facetKey)) {
      this.$set(this.filters, facetKey, [])
    }
    const selectedList = this.filters[facetKey]
    if (e.target.checked) {
      selectedList.push(val)
    } else {
      const idx = selectedList.indexOf(val)
      if (idx > -1) selectedList.splice(idx, 1)
    }
  }
}

这个方案不需要提前遍历初始化，但是模板和逻辑代码会冗余很多，非必要优先选方案1。

踩坑提醒：复选框组绑定的目标值必须是数组类型，如果你初始化成undefined、null或者字符串，会出现多个复选框联动选中、值无法正常累加的问题，和你用不用动态绑定没有关系，硬编码的时候也要注意这点。

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