如何在Vue中根据列表复选框勾选状态动态控制对应按钮的禁用状态

原有代码的核心问题 #

• v-for遍历未声明索引参数index，导致checkBoxChecked方法接收的index为undefined，状态修改逻辑完全失效
• checkBoxChecked方法内的数组遍历逻辑错误，每次修改会覆盖全部按钮的禁用状态，而非仅修改当前行对应状态
• deleteTask方法查找待删除项的属性写错，原代码写的是item.id，实际待查找的id在item.task.id下
• 复选框未绑定唯一id，label的for属性无对应值，点击label无法触发对应复选框的勾选操作
• 冗余维护btnDisabled数组，实际可以直接复用todos中已有的isComplete字段简化逻辑

最优修复方案（推荐） #

直接复用todo自带的isComplete字段绑定复选框状态，无需额外维护状态数组，逻辑更简洁：

模板部分代码 #

<template>
  <div class="mt-5 todos-list">
    <div
      v-for="todo in todos"
      :key="todo.task.id"
      class="flex justify-between pb-4 todos-item"
    >
      <div class="flex items-center mr-10 todos-item__checkbox">
        <input
          v-model="todo.task.isComplete"
          type="checkbox"
          class="w-4 h-4 mr-2 border-2 border-red-500 appearance-none checked:bg-red-600 checked:border-transparent"
          :id="`todo-${todo.task.id}`"
        />
        <label :for="`todo-${todo.task.id}`" class="text-lg font-medium todos-checkbox ">
          {{ todo.task.title }}
        </label>
      </div>
      <div class="todos-item__button">
        <button
          class="rounded-lg btn btn-delete"
          :class="{ disabled: !todo.task.isComplete }"
          type="button"
          :disabled="!todo.task.isComplete"
          @click="deleteTask(todo.task.id)"
        >
          Delete
        </button>
      </div>
    </div>
    <AddTodo @addTodo="addTask" />
  </div>
</template>

脚本部分代码 #

<script>
export default {
  data() {
    return {
      todos: [
        {
          task: {
            id: 1,
            title: 'Go to store',
            isComplete: false
          }
        },
        {
          task: {
            id: 2,
            title: 'Go for walk',
            isComplete: false
          }
        },
        {
          task: {
            id: 3,
            title: 'Take dog out',
            isComplete: false
          }
        }
      ]
    }
  },
  methods: {
    addTask(title) {
      this.todos.push({
        task: {
          id: Math.ceil(Math.random() * 1000000),
          title,
          isComplete: false
        }
      })
    },
    deleteTask(id) {
      const index = this.todos.findIndex((item) => item.task.id === id)
      this.todos.splice(index, 1)
    }
  }
}
</script>

修复说明 #

• 去掉了冗余的checkboxes、btnDisabled状态数组，直接将复选框和每条todo的isComplete属性双向绑定
• 删除按钮的禁用状态直接和当前todo的isComplete反向绑定，勾选即启用，取消勾选即禁用，天然一一对应
• 修复了deleteTask的查找逻辑错误
• 补充了复选框和label的id关联，优化交互体验

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