Delete updated v-model checkbox property in vuejs-CodePudding

I have a input checkbox tag which I'm trying to delete after it has been updated in my v-model please how can I go about this

This is my input tag

<input
                v-model="checked"
                type="checkbox"
                id=""
                value="jackets"
              >

I get the v-model value property by doing this

{{checked}}

Please how can I add a delete function to my v-model property in which if I click on the delete function the checkbox would be unchecked

CodePudding user response：

If I understood you correctly try like following snippet (just set your checked property to false):

new Vue({
  el: '#demo',
  data() {
    return {
      checked: true,
      filters: [{name: 'XXL', state: false}, {name: 'Grey', state: false}]
    }
  },
  methods: {
    del() {
      this.filters.forEach(f => f.state = false)
    },
    rem(i) {
      this.filters[i].state = false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(filter, i) in filters" :key="i">
    {{ filter.name }}
    <input
      v-model="filter.state"
      type="checkbox"
      id=""
      :value="filter.name"
    />
    <button @click="rem(i)">X</button>
  </div>
  Remove All
  <input
      type="checkbox"
      id=""
      @input="del"
    />
</div>