基于 v-on:click，如何取消选中 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>

基于 v-on:click，如何取消选中/重置复选框，

基本上我想取消选中复选框，当用户单击 RESET 按钮/标签时。 通常要做到这一点，我需要使用 v-model 或 id 或 label 来定位和触发重置功能吗？

Answer 1

我认为您可以使用以下代码。

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