I've been grappling with retrieving data from a child component using Vue.js. In my parent component, I need to display this data which is selectable in a Bootstrap table within the child component. Here's what I've done so far: Parent component:
import Permissions from '../components/User/PermissionsList'
created() {
Permissions.fetchData()
},
data() {
return {
selectedPermissions: Permissions.data,
}
}
This setup actually functions as expected, however, when I select a row in the child component, it doesn't update. Let me show you how my child component is structured.
<template>
<div>
<b-card title="Permissions">
{{selectedPermission}}
<div>
<!-- Example scoped slot for select state illustrative purposes -->
<template #cell(selectedPermission)="{ rowSelected }">
<template v-if="rowSelected">
<i class="feather icon-disc primary" />
</template>
<template v-else>
<i class="feather icon-circle" />
</template>
</template>
<template #cell(flag)="data">
<b-avatar :src="data.item.flag" />
</template>
<template #cell(status)="data">
<b-badge :variant="status[1][data.value]">
{{ status[0][data.value] }}
</b-badge>
</template>
</b-table>
</div>
</b-card>
</div>
</template>
<script>
import {
BRow,
BCol,
BTable,
BButton,
BCard,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import Api from "@/store/Api";
export default {
components: {
BTable,
BRow,
BCol,
BCard,
BButton,
},
directives: {
Ripple,
},
data() {
return {
selectMode: 'multi',
availablePermissions: [],
selectedPermission: [],
permissionsFields: [{
key: 'id',
label: 'id',
thClass: 'd-none',
tdClass: 'd-none'
}, {key: 'subject', label:'subject', thClass: 'd-none' }, {key: 'action', label:'action', thClass: 'd-none' }],
}
},
mounted() {
return new Promise((resolve, reject) => {
Api().get("/permissions/list").then(response => {
this.availablePermissions = response.data.data;
})
.catch(error => {
console.log('Something bad happeneds')
});
resolve(true)
})
},
methods: {
onRowSelected(items) {
this.selectedPermission = items
},
selectAllRows() {
this.$refs.selectableTable.selectAllRows()
},
clearSelected() {
this.$refs.selectableTable.clearSelected()
},
},
}
</script>
The issue seems to lie with the parent component. I attempted changing `created` to `updated`, but that didn't resolve anything. Any suggestions or insights?