Managing multiple checkboxes in a Vue component

Question

Managing multiple checkboxes in a Vue component

I have a checkbox component in Vue:

<template>
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" v-model="checkbox">
    </div>
</template>
  
<script>
export default {
    data(){
        return {
            checkbox: false
        };
    },
};
</script>

So in the parent component I want to control these checkbox. So here is my parent component:

<div class="card">
    <div class="card-header">
        <CheckBox />
    </div>
<div class="card-body" v-for="item in cart" :key="item.product.id">
    <div class="checkbox-area">
        <CheckBox />
    </div>
</div>

So checkbox in card-body can be added when user clicks to add. So if a user clicks 3 times, 3 checkbox are being added inside of card-body. What I am trying to achieve is, as you see in card-header there is another checkbox, and when this checkbox is clicked, I want to check all the checkboxes inside card-body, and when it is unchecked in card-header, I want to unchcecked everything inside card-body.

So do you have any idea how to achieve this?

Thanks...

javascript vue.js checkbox vuejs2

Answer 1

Answer №1

If you want to implement a checkbox functionality like this:

Vue.component('checkbox', {
  template: `
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" @change="getCheck" v-model="value">
    </div>
  `,
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      value: this.checked
    };
  },
  methods: {
    getCheck() {
      this.$emit("set-checked", this.value)
    }
  },
  watch: {
    checked(){
      this.value = this.checked
    }
  }
})

new Vue({
  el: '#demo',
  data(){
    return {
      all: false,
      cart: [
        {id: 1, check: false},
        {id: 2, check: false},
        {id: 3, check: true},
        {id: 4, check: false}
      ]
    };
  },
  watch: {
    cart() {
      this.cart.find(c => c.check === false) ? this.all = false : this.all = true
    }
  },
  methods: {
    checkAll(val) {
      this.all = val
      this.cart = this.cart.map(c => {
        c.check = val 
        return c
      })
    },
    checkItem(id) {
      this.cart = this.cart.map(c => {
        if(c.id === id) {
          c.check = !c.check 
        }
        return c
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="card">
    <div class="card-header">
    <p>All</p>
      <checkbox :checked="all" @set-checked="checkAll" />
    </div>
    <br/>
    <div class="card-body" v-for="item in cart" :key="item.id">
      <div class="checkbox-area">
        <checkbox :checked="item.check" @set-checked="checkItem(item.id)" />
      </div>
    </div>
  </div>
</div>

Answer 2

If you want to implement a checkbox functionality like this:

Vue.component('checkbox', {
  template: `
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" @change="getCheck" v-model="value">
    </div>
  `,
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      value: this.checked
    };
  },
  methods: {
    getCheck() {
      this.$emit("set-checked", this.value)
    }
  },
  watch: {
    checked(){
      this.value = this.checked
    }
  }
})

new Vue({
  el: '#demo',
  data(){
    return {
      all: false,
      cart: [
        {id: 1, check: false},
        {id: 2, check: false},
        {id: 3, check: true},
        {id: 4, check: false}
      ]
    };
  },
  watch: {
    cart() {
      this.cart.find(c => c.check === false) ? this.all = false : this.all = true
    }
  },
  methods: {
    checkAll(val) {
      this.all = val
      this.cart = this.cart.map(c => {
        c.check = val 
        return c
      })
    },
    checkItem(id) {
      this.cart = this.cart.map(c => {
        if(c.id === id) {
          c.check = !c.check 
        }
        return c
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="card">
    <div class="card-header">
    <p>All</p>
      <checkbox :checked="all" @set-checked="checkAll" />
    </div>
    <br/>
    <div class="card-body" v-for="item in cart" :key="item.id">
      <div class="checkbox-area">
        <checkbox :checked="item.check" @set-checked="checkItem(item.id)" />
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

To begin, ensure that you include necessary props in your Component and set up a watcher to trigger a sync event when the checkbox value changes.

<template>
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" v-model="value">
    </div>
</template>

<script>
export default {
    props: {
        checked: {
            type: Boolean,
            default: false
        }
    }
    data(){
        return {
            value: this.checked
        };
    },
    watch: {
        value(){
            this.$emit("update:checked", this.value)
        }
    }
};
</script>

Next, implement functionality on the cart to monitor these changes and enable checking/unchecking of all items accordingly.

<template>
    <div class="card">
        <div class="card-header">
            <CheckBox :checked.sync="global"/>
        </div>
        <div class="card-body" v-for="item in cart" :key="item.product.id">
            <div class="checkbox-area">
                <CheckBox :checked.sync="item"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            global: false,
            cart: [
                false,
                false,
                false
            ]
        };
    },
    watch: {
        global(){
            for (let i = 0; i < this.cart.length; i++) {
                this.chart[i] = this.global
            }
        }
    }
};
</script>

This code has not been tested, but it should function as expected...

Answer 4

To begin, ensure that you include necessary props in your Component and set up a watcher to trigger a sync event when the checkbox value changes.

<template>
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" v-model="value">
    </div>
</template>

<script>
export default {
    props: {
        checked: {
            type: Boolean,
            default: false
        }
    }
    data(){
        return {
            value: this.checked
        };
    },
    watch: {
        value(){
            this.$emit("update:checked", this.value)
        }
    }
};
</script>

Next, implement functionality on the cart to monitor these changes and enable checking/unchecking of all items accordingly.

<template>
    <div class="card">
        <div class="card-header">
            <CheckBox :checked.sync="global"/>
        </div>
        <div class="card-body" v-for="item in cart" :key="item.product.id">
            <div class="checkbox-area">
                <CheckBox :checked.sync="item"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            global: false,
            cart: [
                false,
                false,
                false
            ]
        };
    },
    watch: {
        global(){
            for (let i = 0; i < this.cart.length; i++) {
                this.chart[i] = this.global
            }
        }
    }
};
</script>

This code has not been tested, but it should function as expected...

Answer 5

Answer №3

Utilizing checkbox input as custom components can present some challenges, but the following code snippet may assist you:

code sandbox

  Vue.component('checkbox', {
    template: `
    <label>
        <input type="checkbox" :value="value" v-model="deltaValue" />
        {{ label }}
    </label>
    `,
    name: "checkbox",
    model: {
       prop: 'modelValue',
       event: 'update:modelValue'
    },
    props: {
      label: String,
      value: [Object, Boolean, Array],
      modelValue: {
        type: [Array, Boolean],
        default: () => [],
      },
    },
    computed: {
      deltaValue: {
        get() {
          return this.modelValue;
        },
        set(value) {
          this.$emit("update:modelValue", value);
        },
      },
    },
  });
  
  new Vue({
    el: '#app',
    data() {
        return {
          areAllSelected: false,
          checkedItems: [],
          cart: [
            { id: 1, name: "tablet"},
            { id: 2, name: "phone"},
            { id: 3, name: "PC" },
          ],
        };
      },
      watch: {
        areAllSelected(areAllSelected) {
          if (areAllSelected) {
            this.checkedItems = [...this.cart];
            return;
          }
          this.checkedItems = [];
        },
        checkedItems(items){
          if (items.length === this.cart.length) {
            this.areAllSelected = true;
            return;
          }
    
          if (items.length === 0) {
            this.areAllSelected = false;
          }
        }
      },
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="card">
    {{ checkedItems }}
    <div class="card-header">
      <checkbox label="check all" v-model="areAllSelected" />
    </div>
    <hr />
    <div class="card-body" v-for="product in cart" :key="product.id">
      <checkbox
        :label="product.name"
        :value="product"
        v-model="checkedItems"
      />
    </div>
  </div>
</div>

Answer 6

Utilizing checkbox input as custom components can present some challenges, but the following code snippet may assist you:

code sandbox

  Vue.component('checkbox', {
    template: `
    <label>
        <input type="checkbox" :value="value" v-model="deltaValue" />
        {{ label }}
    </label>
    `,
    name: "checkbox",
    model: {
       prop: 'modelValue',
       event: 'update:modelValue'
    },
    props: {
      label: String,
      value: [Object, Boolean, Array],
      modelValue: {
        type: [Array, Boolean],
        default: () => [],
      },
    },
    computed: {
      deltaValue: {
        get() {
          return this.modelValue;
        },
        set(value) {
          this.$emit("update:modelValue", value);
        },
      },
    },
  });
  
  new Vue({
    el: '#app',
    data() {
        return {
          areAllSelected: false,
          checkedItems: [],
          cart: [
            { id: 1, name: "tablet"},
            { id: 2, name: "phone"},
            { id: 3, name: "PC" },
          ],
        };
      },
      watch: {
        areAllSelected(areAllSelected) {
          if (areAllSelected) {
            this.checkedItems = [...this.cart];
            return;
          }
          this.checkedItems = [];
        },
        checkedItems(items){
          if (items.length === this.cart.length) {
            this.areAllSelected = true;
            return;
          }
    
          if (items.length === 0) {
            this.areAllSelected = false;
          }
        }
      },
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="card">
    {{ checkedItems }}
    <div class="card-header">
      <checkbox label="check all" v-model="areAllSelected" />
    </div>
    <hr />
    <div class="card-body" v-for="product in cart" :key="product.id">
      <checkbox
        :label="product.name"
        :value="product"
        v-model="checkedItems"
      />
    </div>
  </div>
</div>

Managing multiple checkboxes in a Vue component

Answer №1

Answer №2

Answer №3

Similar questions

The function Page.render() will output a value of false

Map does not provide zero padding for strings, whereas forEach does

The div layer is positioned above the flash object

Replicating row with distinct values

Encountering a problem with AngularJS - receiving the [ng:areq] error, for more information visit http://errors.angularjs.org/1.3.2/ng/areq

Having difficulty implementing two-way binding on SELECT element within Angular JS programmatically

Steps for Disabling Autocomplete in a JSP Page

Determining the state update value in useEffect using dispatch and payload in Redux

Swapping out the entire vue.js container

Issue with grunt-crx task detected

The expression in the v-if directive encountered an error during evaluation

Encountering an issue with Angular routing: Cross-origin requests are restricted to specific protocol schemes, such as HTTP

Tips for styling buttons in react-admin with custom CSS

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

What is the method to deactivate multiple links using jQuery?

IDEA 2021.2 NPM SCRIPTS: Looks like there are no scripts available

The div structure generated through JavaScript appears distinct from its representation in the live DOM

How to properly log out a user in Vue.js?

Search through array elements that are nested deeply

Tips for halting click propagation in VueJS