Estoy tratando de averiguar cómo se convertiría esta función a Vue. Básicamente quiero desmarcar todas las casillas marcadas en la página.
$("#UncheckAll").click(function(){ $("input[type='checkbox']").prop('checked',false); });Crearía una propiedad de datos y la vincularía a una casilla de verificación. Entonces su botón modificaría la propiedad cuando se presione.
Algo como esto:
<button @click='isChecked=false'>Uncheck</button> <input v-model='isChecked' type='checkbox' />En sus opciones de componentes:
data() { return { isChecked: false } }Prueba algo como el siguiente fragmento:
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>