如何为含多字段的对象数组实现v-model绑定，适配多选框表单需求

这个场景不能直接用默认的v-model数组绑定，你可以用中间变量承接输入，再通过计算属性生成目标结构，逻辑最清晰也不会出现响应式异常，以下是Vue3的实现示例，Vue2逻辑完全一致，仅语法有差异。

前置准备 #

首先定义所有可选字段的基础配置：

const allFields = [
  { label: '字段1', name: 'fieldName' },
  { label: '字段2', name: 'anotherFieldName' },
  // 其余字段按需补充
]

模板代码 #

每个字段对应两个checkbox，第二个checkbox仅在第一个勾选时可操作：

<template>
  <div v-for="item in allFields" :key="item.name" style="margin: 10px 0;">
    <!-- 第一个checkbox：控制是否选中该字段 -->
    <input 
      type="checkbox" 
      :id="`field-${item.name}`"
      v-model="checkedFields"
      :value="item.name"
    >
    <label :for="`field-${item.name}`">{{ item.label }}</label>

    <!-- 第二个checkbox：控制是否为必填项 -->
    <input 
      type="checkbox" 
      :id="`required-${item.name}`"
      v-model="requiredMap[item.name]"
      :disabled="!checkedFields.includes(item.name)"
      style="margin-left: 20px;"
    >
    <label :for="`required-${item.name}`">必填</label>
  </div>

  <!-- 调试可直接查看输出结果 -->
  <pre>{{ selectedFields }}</pre>
</template>

逻辑层代码 #

<script setup>
import { ref, computed } from 'vue'

const allFields = ref([
  { label: '字段1', name: 'fieldName' },
  { label: '字段2', name: 'anotherFieldName' },
  { label: '字段3', name: 'thirdField' }
])

// 第一个checkbox的绑定值：存储所有已选字段的字段名
const checkedFields = ref([])
// 第二个checkbox的绑定值：存储每个字段是否必填的映射关系
const requiredMap = ref({})

// 计算属性直接生成你需要的目标结构数组，提交接口直接用这个值即可
const selectedFields = computed(() => {
  return checkedFields.value.map(name => {
    const obj = { name }
    if (requiredMap.value[name]) obj.required = true
    return obj
  })
})

// 编辑场景回显逻辑，直接传入后端返回的数组即可初始化
const initEcho = (serverData) => {
  checkedFields.value = serverData.map(item => item.name)
  requiredMap.value = serverData.reduce((map, item) => {
    map[item.name] = !!item.required
    return map
  }, {})
}
</script>

原理解释 #

v-model默认的数组绑定是针对基础类型值的匹配，你的目标数组是对象数组，直接绑定会因为对象引用问题导致匹配失效，用中间变量做中转的方式没有额外心智负担，也不会出现响应式丢失的问题。

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