Vue.js: Set checkboxes checked if statement is true
A possible solution
<input type="checkbox"
:checked="job.xmlOnline && job.xmlOnline.includes('stepstone')"
@change="onChange('stepstone', $event)"> Stepstone
<input type="checkbox"
:checked="job.xmlOnline && job.xmlOnline.includes('karriere')"
@change="onChange('karriere', $event)"> Karriere
And the onChange method
methods:{
onChange(value, $event){
if (!this.job.xmlOnline)
this.job.xmlOnline = []
const index = this.job.xmlOnline.findIndex(v => v == value)
const checked = $event.target.checked
if (checked && index < 0)
this.job.xmlOnline.push(value)
if (!checked && index >= 0)
this.job.xmlOnline.splice(index, 1)
}
}
Example.
You can just bind it to a literal as
:true-value="1"
and it will work as expected.