Vue.js遍历对象实现Vuetify复选框绑定及值传递问题

你的核心问题在于错误地将v-model绑定到了整个对象，Vuetify单个复选框的v-model应该对应布尔值而非整个对象集合，这才导致取消勾选时返回null。下面是修正方案：

问题分析 #

1. 原代码中v-model="additionalDetails"绑定了整个对象，复选框的:value="{key, value}"会让选中时把该对象加入集合，但取消时会直接置为null，不符合需求。
2. 计算属性的set方法参数错误，当v-model绑定单个布尔值时，set接收的是新的布尔值，而非包含key和value的对象。

修正方案 #

1. 模板调整 #

每个复选框的v-model绑定到对象的对应key属性，同时通过@change事件监听状态变化，直接获取当前key和新的选中状态：

<template>
  <div class="d-flex flex-wrap justify-space-between">
    <div class="d-flex flex-wrap flex-column">
      <v-checkbox
        class="add-checkbox"
        v-for="(value, key) in additionalDetails"
        :key="key"
        v-model="additionalDetails[key]"
        :label="key"
        @change="handleCheckboxChange(key, $event)"
      >
        <template v-slot:label>
          <span class="body-2">{{ key }}</span>
        </template>
      </v-checkbox>
    </div>
  </div>
</template>

2. 脚本逻辑调整 #

去掉原计算属性的set方法，改用handleCheckboxChange方法处理状态变化，同时生成用于保存的键值对对象：

<script>
export default {
  name: "additional-details",
  props: {
    value: Object,
  },
  data() {
    return {
      // 复制props的value到本地状态，避免直接修改props
      localAdditionalDetails: { ...this.value },
    };
  },
  computed: {
    additionalDetails: {
      get() {
        return this.localAdditionalDetails;
      },
      set(newVal) {
        this.localAdditionalDetails = newVal;
      },
    },
  },
  methods: {
    handleCheckboxChange(key, newValue) {
      // 构造需要保存的键值对对象
      const saveData = { [key]: newValue };
      console.log("要保存的数据:", saveData);
      
      // 这里可以调用保存接口，比如：
      // this.$axios.post('/save-url', saveData);
      
      // 如果需要同步更新父组件的value，可以发送事件
      this.$emit('update:value', this.localAdditionalDetails);
    },
  },
};
</script>

关键说明 #

• 用localAdditionalDetails复制props的value，避免直接修改props（Vue中props是单向数据流，不能直接修改）。
• @change事件的$event参数就是复选框的新选中状态（true/false），结合循环的key就能拿到完整的键值对。
• 如果需要父组件同步状态，通过$emit('update:value', ...)触发更新，父组件可以用v-model绑定该组件。

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