Thanks for having look I'm kinda stuck.Trying to figure out how to have first checkbox rendered checked by default.
Here is my JS the categories are coming in dynamically
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
},
});
Here is my template I have choose to make styles inline to make component more reusable
<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>
You can initialy define the value as checked by setting it when you setup the data for the model:
this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v));
Various issues:
:value, then change the model to checked.<style>, you can scope it #category-filter-template .filter-container--wrapper {} if you don't want it conflicting.<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>
Then your component:
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))
},
})
See working online: https://playcode.io/847454/
You should set the source of truth in your model, not in your rendering.
You should have something like
mounted() {
this.categories[0].id=true;
}
however, it's not clear what the structure of categories is. Is it an array? If so, you should initialized it as an empty array instead of an object. Also, if you should probably be using v-model instead of :value so that changes in checked status are saved in the model. Finally, I'm not sure if you want the model to be linked to the id attribute. Probably there is another attribute that you want to bind.