基于 v-on:click，如何取消选中 Vuejs 中的复选框值？答案

【问题标题】：Based on v-on:click, How to uncheck the checkbox values in Vuejs?基于 v-on:click，如何取消选中 Vuejs 中的复选框值？
【发布时间】：2021-05-16 20:27:35
【问题描述】：

<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，如何取消选中/重置复选框，

基本上我想取消选中复选框，当用户单击重置按钮/标签时。一般来说，我需要使用 v-model 或 id 或 for in 标签来定位和触发重置功能吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我认为你可以使用下面的代码。

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

    }
</script>

【讨论】：

【解决方案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>

【讨论】：