Starting out with Vue and web development. I am currently building my app using Laravel and Vue.
This is the code snippet I am working on:
created: function () {
let self = this;
self.setActive('tab1');
axios.get(this.$apiAdress + '/api/tasks/create?token=' + localStorage.getItem("api_token"))
.then(function (response) {
self.documentDircionary = response.data.documentDircionary;
self.selectedDocumentDircionary = response.data.selectedDocumentDircionary;
}).catch(function (error) {
console.log(error);
self.$router.push({path: '/login'});
});
<template v-for="(option) in documentDircionary">
<div class="form-group form-row" :key="option.name">
<CCol sm="12">
<input type="checkbox" name="selectedDocuments[]" :id="option.value" /> {{ option.label }}
</CCol>
</div>
</template>
The code displays checkboxes correctly - everything seems to be working fine. My issue lies in setting the selected attribute for the checkboxes.
The array selectedDocumentDircionary received from the API looks like this:
"selectedProducts": [1,2,43]
I'm wondering how I can set the 'checked' state only for the checkboxes that match the values in selectedProducts?
Your assistance would be greatly appreciated.