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);
});
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
}
}
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>