Based on v-on:click, How to uncheck the checkbox values in Vuejs?

Question

<div class="reser-productlist">RESET</div>

<div class="checkbox-alignment-form-filter">
  <input type="checkbox" id="Coils" value="Coils" class="vh-product" v-model="checkedNames" />
  <label class="productlist-specific" for="Coils">Cs</label>
</div>

<div class="checkbox-alignment-form-filter">
  <input type="checkbox" id="Sheets" value="Sheets" class="vh-product" v-model="checkedNames" />
  <label class="productlist-specific" for="Sheets">Sts</label>
</div>

Based on v-on:click, How to uncheck/reset the checkbox,

Basically i want to uncheck the checkboxes, When user click on the RESET button/label. Generally to do this do i need to use the v-model or id or for in label to target and trigger the reset functionality?

Dhaval Vaghela · Accepted Answer · 2021-05-16 12:17:55Z

1

I think you can use below code.

<div class="reser-productlist" @click="reset">RESET</div>
<script>
    export default
    {
        methods:{
            reset()
            {
                this.checkedNames = '';
            }
        }

    }
</script>

answered May 16, 2021 at 12:17

Dhaval Vaghela

4505 silver badges20 bronze badges

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

Comments

bel3atar · Accepted Answer · 2021-05-16 12:27:35Z

0

const App = new Vue({
el: '#app',
template: `<div>
  <div class="reser-productlist" @click="reset">RESET</div>

  <div v-for="product in products" class="checkbox-alignment-form-filter">
    <input type="checkbox" :id="product" :value="product" class="vh-product" v-model="checkedNames" />
    <label class="productlist-specific" :for="product">{{ product }}</label>
  </div>
  </div></div>
 `,
 data() {
  return {
    products: ['Coils', 'Sheets'],
    checkedNames: [],
  }
 },
 methods: {
  reset() {
    this.checkedNames = []
  }
 }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id=app>

answered May 16, 2021 at 12:27

bel3atar

9436 silver badges6 bronze badges

Collectives™ on Stack Overflow

Based on v-on:click, How to uncheck the checkbox values in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related