Vue fetch data from child component

Question

I'm struggling with fetching data from child component with Vue.js. I have parent component where I need to render that data and in child component this data is selectable bootstrap table. So what I did so far: Parent component:

import Permissions from '../components/User/PermissionsList'

created() {
        Permissions.fetchData()
    },

data() {
        return {
            selectedPermissions: Permissions.data,
        }
}

And this actually works, but when I select some row in that chid component, it's not updating. So this is how my child component looks.

<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>

Clearly problem is with parent component, I tried to change created to updated but it's not working. Any suggestins?

Answer 1

You could use emit on your child component to emit changes to the parent element, and add the listeners for custom events to react to the changes. For example, you can place this.$emit('dataUpdated') on your child component and add <Component @dataUpdated="doSomething" />