[Vuejs]-Render button based on checkbox count

by

1👍

✅

There are a bunch of ways to do this, some are easier or harder depending on your data structures.

If your students array is fully reactive you could have a computed property that updates any time that object changes. Something like:

// ... vue stuff...
computed:{
  // ... your other computed properties
  enoughBoxesChecked(){
    // you could also use an accumulator, but this is very easy to read.
    return this.students.filter(student=>student.exclude).length > 2;
  }
}
// ... other vue stuff

Then you could use that enoughBoxesChecked computed property on the button you want to disable. Something like <button :disabled="enoughBoxesChecked">....

👤Adam Coster

Leave a comment