如何根据列表中的复选框禁用 Vue 动态按钮

Question

我在学习 Vue 时创建了一个 Todo 应用程序，到目前为止一切都很好。我有一个问题，最初我将任务删除按钮设置为禁用，并且希望仅在选中相关复选框时才启用它。截至目前，当我单击任何任务复选框时，所有按钮都会受到影响。不确定如何创建与这 2 个元素的关系。

 <template>
        <div class="mt-5 todos-list">
          <div
            v-for="todo in todos"
            :key="todo.id"
            class="flex justify-between pb-4 todos-item"
          >
            <div class="flex items-center mr-10 todos-item__checkbox">
              <input
                v-model="checkboxes"
                :value="todo.task.title"
                type="checkbox"
                class="w-4 h-4 mr-2 border-2 border-red-500 appearance-none checked:bg-red-600 checked:border-transparent"
                @change="checkBoxChecked($event)"
              />
              <label for="todo" 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: btnDisabled[index] }"
                type="button"
                :disabled="btnDisabled[index]"
                @click="deleteTask(todo.task.id)"
              >
                Delete
              </button>
            </div>
        <AddTodo @addTodo="addTask" />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          checkboxes: [],
          btnDisabled: [],
          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
              }
            }
          ]
        }
      },
  mounted() {
    const disableArr = this.todos.map((el) => true)
    this.btnDisabled.push(...disableArr)
  },
      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.id === id)
          this.todos.splice(index, 1)
        },
         checkBoxChecked(event, index) {
  if (event.target.checked) {
    this.btnDisabled = this.btnDisabled.map((el, i) => index !== i)
  } else {
    this.btnDisabled = this.btnDisabled.map((el, i) => index === i)
  }
}
      }
    }
    </script>

Answer 1

我认为这是因为您的所有待办事项只有一个布尔状态。如果您将btnDisabled 数据更改为数组，也许它会起作用，因此每个待办事项都会有自己的禁用或未禁用状态。

这是我试图指出的一种方式

将 btnDisabled 改为数组

btnDisabled = this.todos.map(el => true)

为 v-for 添加索引

v-for="(todo,index) in todos"

将索引传递给@change

@change="checkBoxChecked($event,index)"

修改checkBoxChecked方法

checkBoxChecked(event, index) {
  if (event.target.checked) {
    this.btnDisabled = this.btnDisabled.map((el,i) => index === i ? false : true)
  } else {
    this.btnDisabled = this.btnDisabled.map((el,i) => index === i ? true : false)
  }
}

将禁用绑定到 btnDisabled 的特定索引

:disabled="btnDisabled[index]"

希望这能解决您的问题