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?

Answer 1

I think you can use below code.

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

    }
</script>

Answer 2

 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/vue@2.6.12"></script> <div id=app>