How to have Vue dynamic button disabled based on checkbox from list

Question

I've created a Todo app while learning Vue, so far so good. I have on issue where initially I set the tasks delete button to disabled and want to have it be enabled only if the checkbox related is checked. As of now when I click any task checkbox ALL the buttons are affected. Not sure how you would create a relation to the 2 elements.

 <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>

Qoyyima Fias Salam · Accepted Answer · 2021-10-15 18:55:52Z

1

I think it is because you only just have one boolean state for all of your todos. Maybe it will work if you change btnDisabled data into array, so each todo will have their own disabled or not disabled state on their own.

Here are one way of what I'm trying to point out

Change btnDisabled into array

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

Add index to v-for

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

Pass index to @change

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

Modify checkBoxChecked Method

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)
  }
}

bind disabled to specific index of btnDisabled

:disabled="btnDisabled[index]"

Hope this solve your issue

answered Oct 15, 2021 at 18:55

Qoyyima Fias Salam

1847 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MonTOne Over a year ago

Hi @Qoyyima Fias Salam! thanks for the input! clearing things up for me. The only issue I am seeing now is the checkBoxChecked method is returning this error: Unnecessary use of boolean literals in conditional expression

Qoyyima Fias Salam Over a year ago

Hi @MonTOne , happy to help! maybe you can change 'index === i ? false : true' to become 'index !== i' , and 'index === i ? true : false' into 'index === i' , and see if the error still shows. And if the answer really answer your question, please set the answer as accepted answer, thanks!

MonTOne Over a year ago

Yes I actually changed that before which removed error but still not functioning correctly. On initial page load only the FIRST instance of the button is disabled. I tried creating array map on the mounted lifecycle which solved that issue. What happens now is when I click on one checkbox it removes the correct disabled state but then the other items also remove the disabld state.

MonTOne Over a year ago

updated original post with NEW changes

Collectives™ on Stack Overflow

How to have Vue dynamic button disabled based on checkbox from list

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related