Vue.js Vuetify动态资源权限复选框数组收集问题排查

看起来你遇到的核心问题是复选框绑定逻辑错误，导致提交时无法正确收集选中的权限数组，只能得到最后一个选中的项。让我们一步步拆解问题并修复：

1. 核心问题：复选框的v-model绑定错误 #

你的模板中直接把v-model绑定到了result[indexe]（也就是对应资源的权限数组），但这种方式在Vuetify的v-checkbox中并不能正确实现"多选数组"的绑定逻辑——它会把整个数组替换成单个选中的权限值，最终就只剩最后一个选中项。

2. 修复步骤 #

步骤1：调整模板中的复选框绑定 #

将原来的v-model改成手动控制选中状态，并通过@change事件来更新权限数组：

<v-col cols="12" sm="3" md="3" v-for="(item, index) in checks" :key="index" >
  {{item}}
  <span>
    <v-checkbox 
      :label="item" 
      :value="item"
      :checked="result[indexe].includes(item)"
      @change="togglePermission(indexe, item, $event)"
    ></v-checkbox>
  </span>
</v-col>

步骤2：添加权限切换方法 #

在methods中新增togglePermission方法，负责添加/移除对应资源的权限：

togglePermission(resource, permission, isChecked) {
  const permissions = this.result[resource];
  if (isChecked) {
    // 如果未包含该权限，则添加
    if (!permissions.includes(permission)) {
      permissions.push(permission);
    }
  } else {
    // 如果已包含，则移除
    const idx = permissions.indexOf(permission);
    if (idx !== -1) {
      permissions.splice(idx, 1);
    }
  }
}

步骤3：简化getItem方法（可选但推荐） #

你原来的getItem方法嵌套循环太多，可以用数组reduce简化，让代码更清晰：

getItem() {
  this.payload = {
    id: 22462662,
    role: "Admin",
    permission : {
      package : ['create', 'edit', 'delete', 'show'],
      category : ['create', 'edit', 'delete', 'show'],
      product : ['create', 'edit', 'delete', 'show'],
    },
  };
  const resourceList = ['package', 'users', 'category', 'product', 'assets', 'readers'];
  // 初始化result对象：存在的权限用已有值，不存在的设为空数组
  this.result = resourceList.reduce((acc, resource) => {
    acc[resource] = this.payload.permission[resource] || [];
    return acc;
  }, {});
}

步骤4：优化checks定义（可选） #

把checks从对象改成数组，循环起来更直观：

data() {
  return {
    // ...其他数据
    checks: ["create", "edit", "delete", "show"],
  };
}

3. 为什么这样能解决问题？ #

通过手动控制checked状态和change事件，我们可以精确地维护每个资源对应的权限数组——选中时添加权限，取消时移除权限，避免了直接绑定数组导致的覆盖问题。

现在你再提交表单时，this.result应该就能正确收集每个资源下的所有选中权限了。

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