I am trying to figure out how this function would be converted to Vue. I basically want to uncheck all checked boxes on the page.

$("#UncheckAll").click(function(){
$("input[type='checkbox']").prop('checked',false);
});

CodePudding user response：

You would create data property and bind it to a checkbox. Then your button would modify the property when pressed.

Something like this:

<button @click='isChecked=false'>Uncheck</button>
<input v-model='isChecked' type='checkbox' />

In your component options:

data() { 
  return {
    isChecked: false
  }
}

CodePudding user response：

Try something like following snippet:

new Vue({
  el: '#demo',
  data: {
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}],
    selected: []
  },
  computed: {
    toggleAll: {
      get: function () {
        return this.items ? this.selected.length == this.items.length : false;
      },
      set: function (value) {
        const selected = [];
        if (value) this.items.forEach((item) => selected.push(item.id));
        this.selected = selected;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="demo">
  <input type="checkbox" v-model="toggleAll">
  <span align="left">Toogle all</span>
  <li v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="selected" :value="item.id" number>
    <span>{{ item.name }}</span>
  </li>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>