Gracias por mirar, estoy un poco atascado. Intento descubrir cómo hacer que la primera casilla de verificación esté marcada de forma predeterminada.
Aquí está mi JS, las categorías entran dinámicamente
Vue.component('category-filter', { template: '#category-filter-template', props: { appMounted: false, }, data() { return { categories: {}, checkedState: false, }; }, methods: { handleCheckboxClicked(e) { console.log({ e }); }, }, mounted() { this.appMounted = true; this.categories =jsContext.categories }, });Aquí está mi plantilla. Elegí hacer estilos en línea para que el componente sea más reutilizable.
<div class="filter-container--wrapper" style=" display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 2rem; color: #fff; background-color: #5676a7; border-radius: 5px; " > <div id="filter-item" style="padding: 15px" v-for="category in categories" :key="category.id" > <input id="category-name" type="checkbox" @click="handleCheckboxClicked($event)" :value="category.id" :checked="checkedState" /> <label for="category-name"> <span>\{{category.name}}</span> </label> </div> </div>Puede definir inicialmente el valor como marcado configurándolo cuando configura los datos para el modelo:
this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v));
Varios temas:
:value , luego cambie el modelo a marcado.<style> , puede #category-filter-template .filter-container--wrapper {} si no lo hace No quiero que sea conflictivo. <template id="category-filter-template"> <div class="filter-container--wrapper" :style="wrapperStyle"> <div id="filter-item" :style="itemStyle" v-for="category in categories" :key="category.id" > <input id="category-name" type="checkbox" v-model="category.checked" :checked="category.checked" /> <label for="category-name"> <span>\{{category.name}}</span> </label> </div> </div> </template>Entonces tu componente:
Vue.component('category-filter', { template: '#category-filter-template', data() { return { categories: [] }; }, computed: { wrapperStyle () { return { 'display': 'flex', 'flex-wrap': 'wrap', '-webkit-box-pack': 'center', '-ms-flex-pack': 'center', 'justify-content': 'center', 'margin-bottom': ' 2rem', 'color': '#fff', 'background-color': ' #5676a7', 'border-radius': ' 5px' } }, itemStyle () { return { 'padding': '15px' } } }, mounted() { this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v)) }, })Ver trabajando en línea: https://playcode.io/847454/
Debe establecer la fuente de la verdad en su modelo, no en su representación.
Deberías tener algo como
mounted() { this.categories[0].id=true; } sin embargo, no está claro cuál es la estructura de categorías. ¿Es una matriz? Si es así, debe inicializarlo como una matriz vacía en lugar de un objeto. Además, si probablemente debería usar v-model en lugar de :value para que los cambios en el estado verificado se guarden en el modelo. Finalmente, no estoy seguro si desea que el modelo esté vinculado al atributo id . Probablemente hay otro atributo que desea vincular.