Switch multiple toggle buttons on/off based on created() data - html

Question

I have multiple toggle buttons , each which should be selected if that value is present in the obtained response which i get through created().
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
v-model="selectedCategories.jfif"
:checked="selectedCategories.jfif === 'active'" />
</li>,
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
v-model="selectedCategories.exif"
:checked="selectedCategories.exif === 'active'" />
</li>,
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
v-model="selectedCategories.iptc"
:checked="selectedCategories.iptc === 'active'" />
</li>
I have multiple lists wrapped inside a ul.
The script is as shown:
export default {
data() {
return {
selectedCategories: {},
};
},
methods: {
toggleCheckbox(event) {
console.log("Event is,", event, event.value);
},
},
created() {
//this is how i get the response
this.selectedCategories = {"exif":"active","iptc":"active"}
});
The issue is, if i get the data as :{"exif":"active","iptc":"active"} in this case jfif is not present. All the toggle switches are turned off. Even the one having "exif" and "iptc" get turned off. Where is my binding going wrong?

Answer 1

Instead of a dictionary , i used a list to bind and gave a value parameter to each li.
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
value="exif"
v-model="checkedCategories"
</li>
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
value="jfif"
v-model="checkedCategories"
</li>
<li>
<input
v-on:click="toggleCheckbox($event)"
type="checkbox"
value="iptc"
v-model="checkedCategories"
</li>
Now i get the response in the format of ["exif","iptc"]
data(){
return checkedCategories: []
},
created() {
this.checkedCategories = ["exif","iptc"]
});
}

Answer 2

Using v-model together with checked doesn't make much sense since v-model sets checked itself. Read the Vue documentation on checkboxes: https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
Instead of checked you need to use the true-value and false-value attributes, so in your case true-value="active" and depending what you want to use, for example, false-value="" for an empty string, or :false-value="null" for null (notice the : or you'll get a string "null" instead).
Here is an working example: https://jsfiddle.net/kgewf04d/1/