0

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?

2
  • In Vue, you would usually handle the data within one component (fetch, store, etc.) and then emit it as an event up to the parent as soon as there are any changes (this.$emit('update-data', data)). In the parent, you can then add an event listener on the child component (<child @update-data="parentMethod($event)" />) Commented May 12, 2021 at 11:21
  • Should I use this.$emit in parent or child? Commented May 12, 2021 at 11:36

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.